先说结论
当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);
}
有用请赞或评论支持