使用VueJS填充的html表格销毁并重新渲染DataTable。

问题描述 投票:0回答:1

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

我的问题是,我想放一个DataTable,让用户进行研究,并对表中的行进行排序。我只是简单地在Vue已经显示的HTML表上做:$('my-table').DataTable();。直到我想对我的数据进行更改,它才会正常工作。它们在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();

它并没有更新,而是把已经存在的一行翻倍 或者显示我插入的一行,直到我改变当前页面。

更诡异的是,如果我用.NET Framework 2.0来更新DataTable,就会出现这样的情况。

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

所以现在它是一个简单的HTML表在我的页面上,正确更新与Vue,我在控制台键入 。

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

它就能正常工作。我不明白,因为它和上面的完全一样,除了我从控制台输入,对吗?

我希望这足够清楚。已经谢谢你了

javascript jquery vue.js datatables
1个回答
0
投票

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

如果你使用 $('my-table').DataTable() 它通过DOM位置来引用表格。

当与Vue一起工作时,最好是使用 $ref 来引用一个元素。

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

对你来说,有几种方法可以用。

  • 为DataTable元素使用一个键。当有变化时,更新键,这将重新绘制元素。
  • 你可以试试 this.$forceUpdate(); 在函数末尾
  • 你也可以试试 this.$nextTick().then(()=>$('my-table').DataTable())
© www.soinside.com 2019 - 2024. All rights reserved.