使用 VueJS 填充的 html 表销毁和重新渲染 DataTable

Question

我正在使用 Ajax 从数据库中获取数据，并使用 VueJS 在 HTML 表中显示它们。 我让用户对数据执行一些操作（添加新行、编辑、删除）。 它工作得很好。

我的问题是我想放置一个 DataTable 以允许用户执行研究并对表中的行进行排序。 我只是在做： $('my-table').DataTable(); 在 Vue 已经显示的 HTML 表上。 它一直有效，直到我想对我的数据进行更改。 它们在 Vue 实例中已更改，但未在 DataTable 中呈现。

现在我尝试在我的 DataTable 上使用 destroy() 方法然后重新制作和实例，我有一个奇怪的结果，这是我想要更新我的 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()

它工作得很好。 我不明白，因为它与上面完全相同，只是我是从控制台输入的，对吧？

我希望它足够清楚。 已经谢谢了！

Answer 1

Vue 可能在这里与 DataTable 竞争 DOM 元素。

如果您使用$('my-table').DataTable()它会通过 DOM position 引用该表。

使用 Vue 时，最好使用$ref来引用元素。

Vue 在后台做了一些魔术，只允许更改为重新渲染的 object。 所以看起来当你销毁和创建一个新的 object 时，Vue 没有办法知道它发生了变化，也没有重新渲染它。

有几种方法可能适合您。

• 使用 DataTable 元素的键。 当有更改时更新键，这将重绘元素
• 你可以试试this.$forceUpdate(); 在 function 的末尾
• 你也可以试试this.$nextTick().then(()=>$('my-table').DataTable())