出现的问题
在data中定义了groups对象,其中每一个属性双向绑定一个下拉框,来确定选中的值,它的内容是从是从后台获取的。
如果直接通过赋值,那么网页上的下拉框是无法选中的
代码中定义
data() {
return {
groups: {},
}
}
直接赋值
async fetchData() {
let resp = await axios.get("/category");
this.groups['a下拉框'] = resp.data['a下拉框'];
this.groups['b下拉框'] = resp.data['b下拉框'];
},
经过动态加载后应该这样
groups: {
'a下拉框': 1,
'b下拉框': 1,
},
虽然groups中已经有了数据,但是下拉框并不能点击,说明我们的双向绑定出了问题
解决方案
原因
因为 Vue 无法探测普通的新增属性。在实例创建之后添加新的属性到实例上,它不会触发视图更新。Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。
通过Vue.$set() 解决
Vue.$set() 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
async fetchData() {
let resp = await axios.get("/category");
this.$set(this.groups, 'a下拉框', resp.data['a下拉框']);
this.$set(this.groups, 'b下拉框', resp.data['b下拉框']);
},
通过这样的方法,实现了新增属性的双向绑定,并且触发了视图更新,并且下拉框也可以正常使用了。