问题:赋值后页面上下拉list(即config里的属性)无值
(这个dom不更新的问题我看了文档5678遍了,每次遇到都会纠结一番,特此记录一下,纪录一遍就觉得超级简单问题,不记录就是一团乱呼呼的)
data() {
return {
config: {}
}
},
methods: {
//获取各种下拉列表
queryConfig() {
this.$ajax.get('/risk_check/rule/query_config.json').then(o => {
if(o.retcode === 0) {
this.config.check_state = Object.assign({}, o.result_rows.check_state);
this.config.order_state = Object.assign({}, o.result_rows.order_state);
}
});
},
}
原因分析见下面vue文档说明:
由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除;因为上代码config中无属性,直接通过this.config.check_state = xxx的方法相当于添加新属性并为其赋值。所以造成了vue检测不到新属性,dom没有更新的情况;
解决方法:
1.config对属性初始化,这样就不是添加新属性了,,而是为已有属性赋值
data() {
return {
config: {
check_state: {},
order_state: {}
}
}
},
2.通过vue.set的方法添加新属性
this.$set(this.config, 'check_state', o.result_rows.check_state)
此处选择方法1,因为属性不多,而且正好给了初始值以防接口报错的时候无返回值