Add row to one table but not the other with v-for in Vue

Question

I need to add rows in table #dynamic but table static shouldn't be affected.

If I click the button with the code below, both tables will be updated, because they have the same v-for . And, if I put a v-for in a v-for my data won't be fetched. I can't figure out how to "unique" the first table.

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

I found some examples for help like this codepen or fiddle but I am not successful with it.

Answer 1

If the #static table is truly never meant to update when the its data changes, this would be a case for using 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>

This will tell Vue to render the table only once and then ignore it upon any re-renders.

Here's a fiddle.