我正在使用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()
它就能正常工作。我不明白,因为它和上面的完全一样,除了我从控制台输入,对吗?
我希望这足够清楚。已经谢谢你了
Vue可能在这里和DataTable竞争DOM元素。
如果你使用 $('my-table').DataTable()
它通过DOM位置来引用表格。
当与Vue一起工作时,最好是使用 $ref
来引用一个元素。
Vue在后台做了一些魔法,只允许改变的对象重新渲染。所以当你销毁和创建一个新的对象时,Vue似乎没有办法知道它发生了变化,也不会重新渲染它。
对你来说,有几种方法可以用。
this.$forceUpdate();
在函数末尾this.$nextTick().then(()=>$('my-table').DataTable())