Question

I have a table that use Jquery footable. I didn't find an equivalent with VueJS.

Now, I want to delete / restore row in the table, when I delete a row, with

$vm0.isVisible = false; // ( Each row is a vue component )

with:

<tr v-if="isVisible">...</tr>

and then I show it again with :

$vm0.isVisible = true;

Row appears, but lose all footable attributes ( data-toggle="true", data-hide="all" ,etc. )

Anybody knows why is it happening, and if there is something to do about that???

Answer 1

Vue.js使用Virtual-Dom执行dom操作。所以你的html元素实际上是渲染之前的javascript对象。

例如， <tr>元素（作为虚拟dom元素）可能是这样的对象：

{tagName: 'tr', props: {class: 'table-row'}, children: []}

上述对象最终将呈现为<tr class="table-row">。

然而在jQuery Footable中，<tr>元素只是一个带有data-toggle等道具的dom标签，其中所有道具都由jQuery而不是Vue.js控制。 Vue对jQuery创建的这些道具（data-toggle类型的东西）一无所知。因此，当您使用v-if或v-show再次显示任何内容时，它只会被恢复为“Vue类型的元素”。

您可以使用flex-box设计创建一个很酷的响应表，这很容易学习。

如果您不想通过flex-box或自由编写自己的响应表，您可能想尝试一下ElementUI / iView / Vue Material /（Awesome Vue有许多有用的存储库）。

祝你好运！希望你能成功！

Answer 2

不要期望Vue与其他dom操纵者幸福地生活在一起。当Vue安装在元素上时，Vue会将事件侦听器剥离。然后，只要它决定需要，它就会愉快地覆盖它负责的部分。如果你没有传统的javascript就无法生存，你需要让它在安装Vue后运行。你尝试了相反的技巧，在一个由footable管理的表中运行的Vues很少。这将永远不会奏效。

Answer 3

我没有找到与VueJS等效的内容。

你试过https://github.com/ratiw/vue-table吗？我认为它类似于footable

Footable attributes lost when using VueJS v-if false / true

3 个答案: