Вызовите метод vue из шаблона col сетки kendo-ui

Question

Я пытаюсь вызвать метод компонента из шаблона столбца сетки Kendo-UI, но получаю ошибку ссылки.Проблема в том, что у меня есть некоторые глобальные функции форматирования текста, которыми я бы хотел поделиться как миксином.Есть ли способ вызвать метод компонента vue из шаблона col?нашел этот поток, который сказал, что это должно работать с 2018.1.Это версия 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

Проблема в том, что шаблон кендо (с «#thing #») «компилируется» внутри кода кендо, и нет ссылки на ваше приложение 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; 
   }