Как я могу использовать роутер-ссылку в сетке кендо (vuejs) - PullRequest
Новая
       8

Как я могу использовать роутер-ссылку в сетке кендо (vuejs)

0 голосов
/ 22 октября 2018

Как я могу использовать <router-link to="/detail/1">Details</router-link> с Kendo Grid?Я хочу использовать стандартную логику обычной ссылки в сетке, без перезагрузки полной страницы при нажатии.Я пытался использовать router-link внутри сетки с шаблоном, но это не работает.Также нет ошибок в консоли.

Пример для Stackblitz

Обновление 24 октября 2018

Kendo Grid для Vue isинициализация простого виджета Kendo Grid для jQuery.Таким образом, все шаблоны оцениваются во время выполнения, и возможные маршруты не могут быть оценены впоследствии, или элементы маршрутизатора должны быть решены.

Если у вас возникла та же проблема, Проголосуйте за это предложение vue native creation

1 Ответ

0 голосов
/ 03 декабря 2018

Это правда, что вы не можете использовать роутер-ссылку внутри шаблона кендо.Но я думал, что предложу альтернативный способ достижения того же результата.

Вы можете перенаправить на новую страницу программным способом , вызвав router.push({ path: / detail / $ {id}}).

Замените шаблон командой , которая реализует событие щелчка, и оттуда вызовите route.push.

Я обновил ваш примерна slackblitz с рабочим примером.

Сетка кендо с командой col 

<kendo-grid ref="grid"
            :height="550"
            :data-source-ref="'datasource1'"
            :sortable="true">
    <kendo-grid-column :field="'ProductID'"
                       :title="'Product ID'"></kendo-grid-column>
    <kendo-grid-column :field="'ProductName'"
                       :title="'Product Name'"></kendo-grid-column>
    <kendo-grid-column :field="'Link'" :template="linkTemplate1"></kendo-grid-column>
    <kendo-grid-column :command="detailsLink"></kendo-grid-column>
</kendo-grid>

Массив команд в объекте данных. 

new Vue({
    el: '#vueapp',
    router,
    data () {
        return {
          linkTemplate1: "<a href='/detail/#:ProductID#' class='k-button'>Link</a>",
          detailsLink: [{ 
            name: "details",
            click: function(e) {
              // prevent page scroll position change
              e.preventDefault();
              var tr = $(e.target).closest("tr"); // get the current table row (tr)
              // get the data bound to the current table row
              var data = this.dataItem(tr);
              // redirect to new page
              router.push({ path: `/detail/${data.ProductID}` })
            },// template must include k-grid-[command name]
            template: "<a class='k-button k-grid-details'>TEST</a>"
          }]
        }
    }
})
...