在 Vue 中使用 v-for 将行添加到一个表而不是另一个表
Posted
技术标签:
【中文标题】在 Vue 中使用 v-for 将行添加到一个表而不是另一个表【英文标题】:Add row to one table but not the other with v-for in Vue 【发布时间】:2018-01-23 12:17:21 【问题描述】:我需要在表 #dynamic
中添加行,但表 static
不应该受到影响。
如果我点击下面代码的按钮,两个表都会更新,因为它们有相同的v-for
。而且,如果我将v-for
放入v-for
,我的数据将不会被获取。我不知道如何“唯一”第一个表。
vue/html:
<template>
<table id="dynamic">
<tr v-for="rows in list">
<td>Content of row rows.item1 </td>
<td>Content of row rows.item2 </td>
</tr>
</table>
<div @click="block = !block">click</div>
<table id="static">
<tr v-for="rows in list">
<td>Content of row: rows.item3 </td>
<td>Content of row: rows.item4 </td>
</tr>
</table>
</template>
js
export default
data: function ()
return
list: [],
;
,
props: ['channelId'],
mounted() ,
created()
this.fetchChannel(this.channelId);
,
methods:
fetchChannel: function (channelId)
$.getJSON('/api/channel/' + channelId, function (data)
this.list = data;
.bind(this));
,
我找到了一些帮助示例,例如 this codepen 或 fiddle,但我没有成功。
【问题讨论】:
【参考方案1】:如果#static
表在其数据发生变化时真的永远不会更新,则可以使用the v-once
directive:
<table id="static" v-once>
<tr v-for="rows in list">
<td>Content of row: rows.item3 </td>
<td>Content of row: rows.item4 </td>
</tr>
</table>
这将告诉 Vue 只渲染一次表格,然后在任何重新渲染时忽略它。
Here's a fiddle.
【讨论】:
这正是我想要的。干杯以上是关于在 Vue 中使用 v-for 将行添加到一个表而不是另一个表的主要内容,如果未能解决你的问题,请参考以下文章