關於v-for動態渲染索引數組時，非響應的解決辦法

問題描述：

在做一個購物車時遇到的問題，用到二維數組，外層用索引關聯內層，類似,['a':[],'b':[]],需要哪個內層就渲染哪個。問題是，第一次獲取到a的數值，需要渲染時，渲染不出來，需要從b切換到a纔可以。上代碼

<template>
  <div id="app">
    <button @click="getms">獲取麪食</button>
    <hr />
    <button @click='tab="ms"'>麪食</button>
    <hr />
    <ul>
      <li v-for="(val,index) in clist" :key="index">
        <div v-html="val.name" class="name"></div>
        <div class="box">
          <div v-html="'￥'+val.age"></div>
          <div class="right">
            <span class="btn" @click="minu(val)" v-if="val.num>0">-</span>
            <span v-html="val.num"></span>
            <span class="btn" @click="add(val)">+</span>
          </div>
        </div>
      </li>
    </ul>
    <hr />
    <div>總價：{{count}}</div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      list: [],
      count: 0,
      tab: "ms"
    };
  },
  computed: {
    clist() {
      return this.list[this.tab];
    }
  },
  methods: {
    getms() {
      var ms = [
        {
          name: "撈麪條",
          age: 12,
          num: 0
        },
        {
          name: "炒麪",
          age: 6,
          num: 0
        }
      ];
      this.list["ms"] = ms;
      // this.$set(this.list,'ms',ms);
    },
    minu(val) {
      val.num--;
      this.count -= val.age;
    },
    add(val) {
      val.num++;
      this.count += val.age;
    }
  }
};
</script>

<style>
#app {
  padding: 20px;
}
.name {
  font-weight: bold;
  font-size: 1.1rem;
}
.box {
  display: flex;
}
.box > div {
  flex: 1;
}
.right {
  text-align: right;
}
.right .btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #aaa;
  border-radius: 8px;
  text-align: center;
  line-height: 15px;
}
</style>

網上針對這種問題比較少，最後在官網文檔中找到了答案，vue官網文檔，Vue 不能檢測對象屬性的添加或刪除

而關聯數組，顯然當成了對象解析，導致初次渲染不是響應式的

// this.list["ms"] = ms;
  this.$set(this.list,'ms',ms);

解決辦法就是，將原始的添加方法改成vm.$set即可