Kendo-vue-ui обертка Kendo-grid-column формат телефонного номера в сетке

Question

Я пытался использовать фильтр Vuejs в kendo-grid-column

<kendo-grid-column field="phone" title="Phone" :template="`kendo.toString(phone) | phoneformat`" width="10%"></kendo-grid-column>

Вместо того, чтобы отображаться как отформатированная строка, результат отображается как

Фильтр я использую как:

const filters = [
  {
    name: "phoneformat",
    execute: value => {
        debugger
      var piece1 = phoneNumber.substring(0, 3); //123
      var piece2 = phoneNumber.substring(3, 6); //456
      var piece3 = phoneNumber.substring(6); //7890

      //should return [phone]
      return kendo.format("({0})-{1}-{2}", piece1, piece2, piece3);
    }
  }
];

export default filters;

Я зарегистрировал фильтр во всем мире как:

import filters from './shared/extension'

filters.forEach(f => {
   Vue.filter(f.name, f.execute)
})

Помогите мне, что мне здесь не хватает.

Answer 1

:template="`kendo.toString(phone) | phoneformat`"

У вас есть неприятности во всем :template значение атрибута, то есть вы связываете template опора для литерала шаблона JavaScript, который оценивает литеральную строку

"kendo.toString(phone) | phoneformat"

Решение состоит в том, чтобы просто связать выражение вместо

<kendo-grid-column :template="phone | phoneformat" ...

Увидеть

• https://vuejs.org/v2/guide/filters.html
• https://vuejs.org/v2/guide/components-props.html