从 kendo-ui 网格 col 模板内部调用 vue 方法

Question

我正在尝试从 Kendo-UI 网格列模板内部调用组件方法，但出现引用错误。问题是我有一些全局文本格式化函数，我想作为 mixin 共享。无论如何可以从网格列模板内部调用 vue 组件方法吗？

<template>
<div>
<kendo-datasource ref="emailAccountDS"
:transport-read-url="'api/EmailAccounts'"
:transport-read-data-type="'json'"
:transport-read-type="'get'"
:type="'aspnetmvc-ajax'"
:schema-data="'data'"
:schema-total="schemaTotal"
:schema-model-id="'id'"
:schema-model-fields="schemaModelFields"
:server-paging= "true"
:server-sorting="true"
:server-filtering="true"
:page-size="25"
>
</kendo-datasource>
<kendo-grid :data-source-ref="'emailAccountDS'"
:pageable-always-visible="false"
:pageable-refresh="true"
:selectable="'row'"
:sortable="true"
:filterable="true"
:auto-bind="true"
:editable="'popup'"
:toolbar="['create','edit']">
<kendo-grid-column field="hostName" title="Host Name"></kendo-grid-column>
<!-- ReferenceError: testMethod is not defined --> 
<kendo-grid-column field="accountType" title="Account Type" template="# testMethod(accountType) #"></kendo-grid-column>
<kendo-grid-column field="port" ></kendo-grid-column>
<kendo-grid-column field="useSsl"></kendo-grid-column>
<kendo-grid-column field="username"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
export default {
name: 'EmailAccounts',
data: function () {
return {
schemaModelFields: {
id: { type: 'number', editable: false, nullable: true },
isEnabled: { type: 'boolean', defaultValue: true, validation: { required: true } },
hostName: { type: 'string', validation: { required: true } },
port: { type: 'number', defaultValue: 995, validation: { required: true } },
useSsl: { type: 'boolean', defaultValue: true, validation: { required: true } },
username: { type: 'string', validation: { required: true } }
}
}
},
methods: {
testMethod(accountType) {//<=== ReferenceError: testMethod is not defined
return "foo";
},
schemaTotal: function (response) {
return response.total;
}
}
};
</script>
<style>
</style>

我在这里设置了一个显示相同错误的 plunker。

我发现这个线程说这应该从 2018.1 开始工作。这是我正在运行的剑道UI版本。

"dependencies": {
"@progress/kendo-datasource-vue-wrapper": "^2018.2.516",
"@progress/kendo-grid-vue-wrapper": "^2018.2.516",
"@progress/kendo-layout-vue-wrapper": "^2018.2.516",
"@progress/kendo-theme-default": "^2.53.1",
"@progress/kendo-treeview-vue-wrapper": "^2018.2.516",
"@progress/kendo-ui": "^2018.2.516",
"axios": "^0.18.0",
"element-ui": "^2.3.3",
"jquery": "^2.2.4",
"popper.js": "^1.13.0",
"vue": "^2.5.11",
"vue-awesome": "^2.3.5",
"vue-router": "^3.0.1",
"webpack-hot-middleware": "2.21.2"
},

Answer 1

问题是剑道模板(带有"# something #"(在剑道代码中"编译"，并且没有引用您的 Vue 应用程序。 但是在jquery-kendo文档中，我发现您可以将函数传递给模板。正如我在剑道源代码模板函数中看到的那样，函数总是应该返回不为空/未定义的值。所以我在下面添加了更改，它就像一个魅力：

1. Vue 模板中的更改(将模板属性绑定到函数(<kendo-grid-column field="UnitsInStock" title="Units In Stock" :template="isInStock" :width="120"></kendo-grid-column>

2. Vue 组件代码的更改(isInStock方法略有更改，以期望像文档中一样当前数据项对象，并使其始终返回值(：

   isInStock: function(dataItem){ 
   if(dataItem.UnitsInStock < 0 || !dataItem.UnitsInStock){
   return "Out of stock";
   }
   return dataItem.UnitsInStock; 
   }