关于vue中数据更新视图不同步更新的问题

一、问题说明

源码如下：

          <div class="caseMenuItem">
            <span
              v-for="(item, index) in menuData"
              :key="index"
              @click="checkCaseMenu(index)"
              :class="{ check: item.check }"
              >{{ item.dictValue }}</span
            >
          </div>

async mounted() {
    await this.$axios
      .get("接口地址")
      .then((res) => {
        this.Data.forEach((item) => {
          item.check=false
        });
        this.Data[0].check=true);
      });
  },

checkCaseMenu(index) {
      this.Data.forEach((item, i) => {
       item.check= i == index ? true:false
      });
    },

当切换tab时（即checkCaseMenu执行后），虽打印item.check为正确值，但对应视图并未更新，check类并未添加在对应项上。

二、解决

原因为新增的check属性非响应式数据，解决方法为使用vue中的set设置check的值，可自动将数据转换为响应式数据。如：

this.Data.forEach((item) => {
          this.$set(item, "check", false);
        });
        this.$set(this.Data[0], "check", true);

checkCaseMenu(index) {
      this.Data.forEach((item, i) => {
        this.$set(item, "check", i == index ? true : false);
      });
    },