Question

我正在尝试从Kendo-UI网格列模板中调用组件方法，但是我收到了引用错误。问题是我有一些全局文本格式化功能，我想作为mixin分享。无论如何从网格col模板中调用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 here。

我发现this帖子说自2018年以来这应该有效。这是我正在运行的kendo-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

问题是kendo模板（带有“＃something＃”）“编译”在kendo代码中，并且没有对你的Vue应用程序的引用。但是在jquery-kendo文档中，我发现你可以将函数传递给模板。正如我在剑道源代码模板中看到的那样，函数总是应该返回not null / undefined value。所以我在下面添加了更改，它就像一个魅力：

Vue模板中的更改（将模板attr绑定到函数）isInStock
Vue组件代码中的更改（略微更改isInStock: function(dataItem){ if(dataItem.UnitsInStock < 0 || !dataItem.UnitsInStock){ return "Out of stock"; } return dataItem.UnitsInStock; }方法以期望当前数据项对象，如同在docs中并使其始终返回值）：
```
stringify
```

从kendo-ui grid col模板中调用vue方法

1 个答案: