Datatables Ajax Cant отрисовывает компонент Vue

Поскольку в Vue легко обернуть / использовать компонент jQuery, пользователь часто ошибается, думая, что компоненты 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 обычно нет.

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

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

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