使用 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 位置引用表格。

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

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

有几种方法适合你。

• 为DataTable 元素使用一个键。当有变化时更新键，这将重绘元素
• 你可以在函数末尾尝试this.$forceUpdate();
• 你也可以试试this.$nextTick().then(()=>$('my-table').DataTable())