Уничтожение и повторная визуализация DataTable с использованием таблицы html, заполненной VueJS - PullRequest
Новая
       5

Уничтожение и повторная визуализация DataTable с использованием таблицы html, заполненной VueJS

0 голосов
/ 08 мая 2020

Я получаю данные из базы данных с помощью Ajax и отображаю их в таблице HTML с помощью VueJS. Я позволяю пользователю выполнять некоторые действия с данными (добавлять новую строку, редактировать, удалять). Он работает отлично.

Моя проблема в том, что я хотел бы разместить DataTable, чтобы пользователь мог проводить исследования и сортировать строки в таблице. Я просто делаю: $ ('my-table'). DataTable (); в таблице HTML уже отображается Vue. Это работает, пока я не хочу изменить свои данные. Они изменены в экземпляре Vue, но не отображаются в DataTable.

На данный момент я попытался использовать метод destroy () в моем DataTable, а затем переделать и экземпляр, и у меня есть странный результат, вот мой код, когда я хочу обновить свой DataTable: 

 $('my-table').DataTable().destroy();
 // Here I'm getting the data and put it in the Vue instance
 // Once it's done I simply re-mount the DataTable :
 $('my-table').DataTable();

И он не обновляется, он удваивает уже существующую строку или отображает строку, которую я вставил, пока я не изменю текущую страницу.

Что еще более странно, если я сделаю: 

  $('my-table').DataTable().destroy();
  // Here I'm getting the data and put it in the Vue instance

Итак, теперь это простая таблица HTML на моей странице, правильно обновленная с помощью Vue, я набираю в консоли:

$('my-table').DataTable()

И работает нормально. Я не понимаю, потому что это точно так же, как указано выше, за исключением того, что я набираю его с консоли, верно?

Надеюсь, это достаточно ясно. Уже спасибо!

1 Ответ

0 голосов
/ 08 мая 2020

Vue может конкурировать за элементы DOM здесь с DataTable.

Если вы используете $('my-table').DataTable(), он ссылается на таблицу по позиции DOM.

При работе с Vue, для ссылки на элемент лучше использовать $ref.

Vue выполняет некоторую магию c в фоновом режиме, что позволяет повторно визуализировать только измененный объект. Кажется, что когда вы уничтожаете и создаете новый объект, Vue не знает, что он изменился, и не отображает его повторно.

есть несколько способов может для вас.

  • используйте ключ для элемента DataTable. Когда происходит изменение, обновите ключ, который перерисовывает элемент
  • , вы можете попробовать this.$forceUpdate(); в конце функции
  • вы также можете попробовать this.$nextTick().then(()=>$('my-table').DataTable())
...