Javascript 将行添加到一个表中，而不是在Vue中使用v-for的另一个表中

我需要在表

#dynamic

中添加行，但表

static

不应受到影响

如果我用下面的代码单击按钮，两个表都将更新，因为它们具有相同的

v-for

。而且，如果我将

v-for

放在

v-for

中，我的数据将不会被提取。我不知道如何“独特”第一个表

vue/html： 我找到了一些类似或的帮助示例，但我没有成功地使用它。

如果

#static

表真的不打算在its数据更改时更新，则可以使用：

行的内容：{rows.item3}
行的内容：{rows.item4}

这将告诉Vue仅渲染一次表，然后在任何重新渲染时忽略它

---

这正是我想要的。干杯

<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>

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));
    },
  }
}

<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>