做一个三级联动时遇到了样式没有跟着当次数据变化时变化的问题
image.png
也就是说点击title标签的时候按理来说 数据发生变化 vue 应该可以监测到并且渲染在页面上 color标签里的 按钮状态就会实时更新
原理是
<div class="specSel">
<h3 class="selLine">
<p>Title</p>
</h3>
<button class="btn btn-danger" v-for="test in sortByName(testList)" @click="selName(test)">
{{test.name}}
</button>
<h3 class="selLine">
<p>Color</p>
</h3>
<button class="btn btn-danger" :class="{active:current_selectSpec.option1===test.option1,disabled:current_selectSpec.name!==test.name}"
v-for="test in sortByColor(testList)" @click="selOpt1(test)">
{{test.option1}}
</button>
<h3 class="selLine">
<p>Style</p>
</h3>
<button :class="{active:current_selectSpec.option2===test.option2,disabled:current_selectSpec.option1!==test.option1}" class="btn btn-danger" v-for="test in sortByStyle(testList)" @click="selOpt2(test)">
{{test.option2}}
</button>
</div>
data() {
return {
current_selectSpec: {},
},
methods: {
sortByName(list) {
var arr = [];
return list.filter(function (i) {
if (arr.indexOf(i.name) < 0) {
arr.push(i.name);
return true;
}
return false;
});
},
sortByColor(list) {
let aaalist = [];//对象数组
let bbblist = [];//规格数组
if (this.current_selectSpec.name) {//判断选中1级
for (let i in list) {
let spec = list[i];
if (this.current_selectSpec.name === spec.name) {
//如果接收到的数据里名字有和当前选中的数据名字一样的就把该条数据的名字加入规格数组，把该条数据所在的对象加入到对象数组中
if (bbblist.indexOf(spec.option1) < 0) {
bbblist.push(spec.option1);
aaalist.push(spec);
bbblist.sort();
}
}
for(let i in list){
let spec = list[i];
if (bbblist.indexOf(spec.option1) < 0) {//补充其他一级规格中的二级规格到数组,查找二级规格是否已经存在
aaalist.push(spec);
bbblist.push(spec.option1);
}
}
}
}
else {//1级没有选中（页面刚打开）
for(let i in list) {//去重
let spec = list[i];
if (bbblist.indexOf(spec.option1) < 0) {
bbblist.push(spec.option1);
aaalist.push(spec);
bbblist.sort();
}
}
}
return aaalist;
},
sortByStyle(list) {
let aaalist = [];//对象数组
let bbblist = [];//规格数组
if (this.current_selectSpec.option1) {//判断选中1级
for (let i in list) {
let spec = list[i];
if (this.current_selectSpec.option1 === spec.option1) {
//如果接收到的数据里名字有和当前选中的数据名字一样的就把该条数据的名字加入规格数组，把该条数据所在的对象加入到对象数组中
if (bbblist.indexOf(spec.option2) < 0) {
bbblist.push(spec.option2);
aaalist.push(spec);
bbblist.sort();
}
}
for(let i in list){
let spec = list[i];
if (bbblist.indexOf(spec.option2) < 0) {//补充其他一级规格中的二级规格到数组,查找二级规格是否已经存在
aaalist.push(spec);
bbblist.push(spec.option2);
}
}
}
}
else {//1级没有选中（页面刚打开）
for(let i in list) {//去重
let spec = list[i];
if (bbblist.indexOf(spec.option2) < 0) {
bbblist.push(spec.option2);
aaalist.push(spec);
bbblist.sort();
}
}
}
return aaalist;
},
}
ui框架用的是bootstrap
看着代码是没问题的，但是在页面里点击了title里的按钮之后 二级按钮的可选状态并没有更新
这个问题困扰了我很长时间 偶然发现改变一个有v-model属性的input框的value值时 按钮的可选状态更新了，
由此得出结论 是因为vue没有检测到
image.png
看了一下我用来push给临时数组的对象
果然
current_selectSpec: {},
是空的，所以并不是class没给上，因为vue的监测机制 每条数据的监测都是独立的 所以在该次监测中 current_selectSpec对象里面并没有name 、option等键值，没有初始化属性，所以才会出现这种bug。
改变v-model里的值时 由于另一个监测让页面重新渲染 所以它的可选状态跟着更新了。
所以这里初始化一下这个对象的属性
current_selectSpec: {name:'',option1:'',option2:''},
分割线
