如何使用Vue Js绑定Kendo UI Grid列上的自定义复选框事件？

Question

这里，我在复选框上设置了一个方法checkboxToggle()，但是不知道为什么它不能工作，当我单击复选框时，它不会调用该方法，为什么？ 这是我的代码：

`方法：{

 toggleTemplate(){
    let template =
       `<label class="switch" >
        <input type="checkbox" class="user-status" # if(Status){#checked#}                                         #               v-on:click="checkboxToggle()"/>
        <span class="slider round"></span></label>`;

    let compiledTemplate = kendo.template(template);
    return compiledTemplate.bind(this);

},
 checkboxToggle(){
        //TODO Grid checkbox template event binding not working
        alert("Checkbox Toggle !!!")
}

}

另一个

<kendo-datasource ref="localDataSource" :data="filteredUsers"
            :group='groupingFiled'>
            </kendo-datasource>
          <kendo-grid :height="500"  :data-source-ref="'localDataSource'"  :resizable="true"
            :filterable="false":sortable-allow-unsort="true":sortable-show-indexes="true"
            :scrollable-virtual="true" :pageable-numeric="false"
            :pageable-previous-next="false" :pageable-messages-display="'Showing {2} users'"
            :editable="'popup'":toolbar="[{name: 'excel', text: 'Excel'}]"
            :excel-file-name="'Motadata_UserListing.xlsx'" :excel-filterable="true" >
            <kendo-grid-column :selectable="true" :width="35"></kendo-grid-column>
            <kendo-grid-column :field="'UserId'" :hidden="true"></kendo-grid-column>
            <kendo-grid-column :field="'UserName'"  :width="150"></kendo-grid-column>
            <kendo-grid-column :field="'UserType'":width="180"></kendo-grid-column>
            <kendo-grid-column :field="'Role'" :width="120"></kendo-grid-column>
            <kendo-grid-column :field="'AssignedGroups'"  ></kendo-grid-column>
            <kendo-grid-column :field="'Email'":width="210" ></kendo-grid-column>
            <kendo-grid-column :field="'Description'":width="200" ></kendo-grid-column>

       <kendo-grid-column :field="'Status'"
                               :width="170"
                               :template="this.toggleTemplate()"></kendo-grid-column></kendo-grid>

我们会感谢你的帮助。

Answer 1

我在这里发现了一个-：

一般来说，Kendo模板无法将事件处理程序绑定到呈现的元素。因此，为了达到预期的结果，我们应该使用本机Vue模板：

https://www.telerik.com/forums/how-can-we-bind-event-for-custom-checkbox-on-kendo-ui-grid-column-using-vue-js

使用此示例-：https://codesandbox.io/s/840nl43698

它帮了我，希望你们能找到有用的东西

谢谢