拿到请求接口数据后,给其中的config.list数组的每一项添加checked属性来控制当前导航是否选中,切换导航时修改checked的值:
data: function () {
return {
configList: [],
menuList: [],
curType: null,
curMenu: 'coin',
}
}
// res是接口返回值
if (res?.code == 0) {
const config = res.data.config;
this.configList = config;
// console.log(config);
this.menuList = config.list.map(item => {
if (item.name == this.curMenu) {
item.checked = true;
this.curType = item.type;
} else {
item.checked = false;
}
return item;
});
}
// 切换导航
changeMenu(item) {
if(item.type == this.curType) return;
this.menuList?.forEach(menu => {
if (menu.type == item.type) {
menu.checked = true;
this.curType = item.type;
} else {
menu.checked = false;
}
})
},
这里的this.configList = config在后面没有用到,写的时候忘记删了,结果发现在切换导航时一直无法切换,打印出来发现数组中的checked是改变了,但是页面上没有效果。
打印config的值才知道,如果先把config赋值给data中的变量configList,config本身也会变成响应式的(多了getter和setter),所以后续给config里面的数组增加属性并要让该属性也成为响应式就需要用this.$set(item, 'checked', false);
如果config不做赋值操作,它就仍然是一个普通对象,给它里面的list数组加上checked属性后也还是一个普通数组,只有赋值给data中的变量menuList时才会让config.list变成响应式。
修改:
// 第一种
if (res?.code == 0) {
const config = res.data.config;
// 先加属性再赋值
this.menuList = config.list.map(item => {
if (item.name == this.curMenu) {
item.checked = true;
this.curType = item.type;
} else {
item.checked = false;
}
return item;
});
}
// 第二种
if (res?.code == 0) {
const config = res.data.config;
// 先赋值变成响应式,通过this.$set()设置响应式属性值
this.configList = config;
this.menuList = config.list.map(item => {
if (item.name == this.curMenu) {
this.$set(item, 'checked', true);
this.curType = item.type;
} else {
this.$set(item, 'checked', false);
}
return item;
});
}