Datatables Ajax Cant рендерит компонент Vue - PullRequest
Новая
       31

Datatables Ajax Cant рендерит компонент Vue

0 голосов
/ 14 сентября 2018

Я пытаюсь соединить Datatable в режиме Ajax и компоненте Vue, который в случае успеха должен отобразить кнопку «Заказать» в Продукте.Я создал API для своего веб-приложения и через запрос get передаю JSON свойству таблицы AJAX.Все данные отображаются правильно, и даже одна кнопка - это порядок, но это не компонент Vue, а простой HTML.Поэтому я передаю в JSON эту строку

, но в результате эта строка записывается в ячейку таблицы, она не преобразуется в vue-компонент ...

если я пропущу эту строку в обычном режиме с датами (без Ajax) - компонент будет отображен, проблем не будет.

Я использую Laravel 5.5

1 Ответ

0 голосов
/ 13 ноября 2018

Поскольку компонент VQ легко обернуть / использовать в Vue, пользователь часто ошибается, считая, что компоненты JQuery совместимы с Vue.

Одна из самых важных вещей, которую нужно понять, это жизненный цикл компонента Vue (создан, смонтирован и т. Д.). https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks). Возможно, вы сможете визуализировать кнопку Vue внутри jQuery DataTable, но это потому что вам повезло с ранним получением данных, т.е. у вас есть данные до того, как Vue полностью отобразит компонент-оболочку Vue.

Это объясняет, почему ajax не работает. Компонент уже визуализирован. Даже если компонент jQuery повторно обработан, он не будет отображать компонент Vue. Вы также столкнетесь с другими проблемами, такими как события Vue, неправильно подключенные при последующей перезагрузке / обновлении, компонент работает неправильно (видимый, скрытый, v-if), потому что Vue активен, в то время как jQuery Plugin / Component обычно нет.

Поэтому, чтобы обернуть компонент jQuery, у вас есть две опции:

  1. Вам необходимо уничтожать и воссоздавать компонент Vue каждый раз, когда вы получаете данные ajax, и визуализировать компонент jQuery в созданном событии Vue. Это помогает компоненту-оболочке перерисовывать, связывать события и т. Д. - частичное решение, см. Ответ Тони здесь: Vuejs и datatables: таблица пуста при использовании v-for для заполнения данных

  2. Примите тот факт, что компонент jQuery не является Reactive, и создайте слой перевода сверху для связи с компонентом jQuery из Vue. Пример (бесстыдный плагин) моей обертки для компонента jQuery DataTable: https://github.com/niiknow/vue-datatables-net

...