Vue数据绑定失败，v-if，:key，变异方法刷新无用的解决方案

先说结论

当v-model绑定一个对象A时,如果对象A的键以对象B为值A.data:B，在对象B更新后，那么即使使用变异方法，v-if、:key更新组件也是在对象A中拿不到对象B的数据的,需要A.data=B重新赋值，完成对v-model直接绑定的对象A的更新。

Vue只在视图与直接绑定的逻辑之间做了双向绑定，无法绑定到深层逻辑，也就是说：逻辑与逻辑之间没有双向绑定。

缘起

今天帮老师做项目，要在table里不断push进条目的代码

初始状态

v-model绑定数据如下:

<div class="col-12">
    <card :title="table1.title" :subTitle="table1.subTitle">
        <div slot="raw-content" class="table-responsive">
          	<paper-table  :data.sync="table1.data" :columns="table1.columns">
          	</paper-table>
        </div>
    </card>
</div>

paper-table是我自己注册的组件，data是表格数据，columns是表头字符串数组。

下面是data,columns的定义

const tableColumns = ["LOGIC_CORE_INDEX", "CPU型号", "逻辑核心频率", "CPU占用率", "CPU架构"];
data() {
    return {
      tableData: [
      ], 
      table1: {
        title: "CPU数据一览",//这些属性在组件注册的时候写好了
        subTitle: "监控模型的总计算资源",
        columns: [...tableColumns],
        data:[],//等下拿到数据直接赋值,不能通过另一个变化属性作为值
      },
	}
}

下面是数据更新操作

methods: {
    postData(url, data) {
      return new Promise(() => {
        var CPUIdx = Axios.post(url + "/watch")
        Axios.all([CPUIdx])
          .then(Axios.spread((CPUI) => {
            this.tableData = []
            this.add(CPUI.data.centralProcessor.logicalProcessorCount,
              CPUI.data.centralProcessor.processorIdentifier.name,
              CPUI.data.centralProcessor.currentFreq,
              CPUI.data.cpuInfo.usePercent,
              CPUI.data.centralProcessor.processorIdentifier.microarchitecture
            ) //这里的参数是后端返回的接口值
          }))
          .catch(err => {
            console.log(err);
          })
      })
    },
    pollData() {
      this.polling = setInterval(() => {
        this.postData(globalVars.Url, {})
	}, 5000)

    },
    add(idx, mod, hz, use, arch) {
      var obj
      while (idx >= 1) {
        idx--
        obj = {
          LOGIC_CORE_INDEX: idx,
          CPU型号: mod,
          逻辑核心频率: hz[idx],
          CPU占用率: use,
          CPU架构: arch,
        }
        this.tableData.push(obj)
      }
      this.table1.data = this.tableData  //重点就在这一句
    },
  },
  mounted() {
    this.pollData()
  },
  beforeDestroy() {
    clearInterval(this.polling);
  }

有用请赞或评论支持

最后