在 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 将行添加到一个表而不是另一个表的主要内容,如果未能解决你的问题,请参考以下文章

vue中v-for循环的时候为啥要添加:key属性

Vue中通过v-for动态添加图片地址

vue-uuid 的 v-for 键的 uuid?

Vue中使用v-for渲染数据为何要添加key属性?(原理及作用)

使用 Vue 在 v-for 中进行条件渲染

使用 Bootstrap-Vue 添加多个带有 v-for 的 video.slots