在Vue中的多个位置动态添加和删除项目

时间:2017-06-21 10:01:50

标签: algorithm vue.js

我有一个用Vue编写的页面,其中有一个包含3列的表格,如下所示:

https://i.stack.imgur.com/Ox7gn.png

每列都是一个完整的实体,每一行都是实体的属性。

在每列的底部,每列都有一组按钮。

我想要做的是在点击按钮时将一些额外的属性(字符串)附加到实体的多个属性,如下所示:

https://i.stack.imgur.com/lnUzt.png

当点击另一个按钮时,会附加更多字符串。

再次单击按钮时,将删除相应的属性。例如,如果单击第二个图像中的“a”按钮,表格将恢复为第一个图像。

由于有很多属性(大约10个),我不想将所有字符串硬编码为每个属性下的div,并使用v-show / v-if有条件地渲染它们。

我还考虑过存储多个活动按钮的数组,并在单击任何按钮时重新渲染整个表。 (必须重新渲染整个表的原因是因为每个单独的行都使用for循环进行渲染,所以我不能只修改一行中的单个元素。)但这似乎不太自然,我相信应该有一个更好的解决方案。

有没有好方法呢?

0 个答案:

没有答案