做一個(gè)三級聯(lián)動(dòng)時(shí)遇到了樣式?jīng)]有跟著當(dāng)次數(shù)據(jù)變化時(shí)變化的問題
image.png
也就是說點(diǎn)擊title標(biāo)簽的時(shí)候按理來說 數(shù)據(jù)發(fā)生變化 vue 應(yīng)該可以監(jiān)測到并且渲染在頁面上 color標(biāo)簽里的 按鈕狀態(tài)就會(huì)實(shí)時(shí)更新
原理是
<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 = [];//對象數(shù)組
let bbblist = [];//規(guī)格數(shù)組
if (this.current_selectSpec.name) {//判斷選中1級
for (let i in list) {
let spec = list[i];
if (this.current_selectSpec.name === spec.name) {
//如果接收到的數(shù)據(jù)里名字有和當(dāng)前選中的數(shù)據(jù)名字一樣的就把該條數(shù)據(jù)的名字加入規(guī)格數(shù)組亚脆，把該條數(shù)據(jù)所在的對象加入到對象數(shù)組中
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) {//補(bǔ)充其他一級規(guī)格中的二級規(guī)格到數(shù)組,查找二級規(guī)格是否已經(jīng)存在
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 = [];//對象數(shù)組
let bbblist = [];//規(guī)格數(shù)組
if (this.current_selectSpec.option1) {//判斷選中1級
for (let i in list) {
let spec = list[i];
if (this.current_selectSpec.option1 === spec.option1) {
//如果接收到的數(shù)據(jù)里名字有和當(dāng)前選中的數(shù)據(jù)名字一樣的就把該條數(shù)據(jù)的名字加入規(guī)格數(shù)組渐逃，把該條數(shù)據(jù)所在的對象加入到對象數(shù)組中
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) {//補(bǔ)充其他一級規(guī)格中的二級規(guī)格到數(shù)組,查找二級規(guī)格是否已經(jīng)存在
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
看著代碼是沒問題的新娜，但是在頁面里點(diǎn)擊了title里的按鈕之后 二級按鈕的可選狀態(tài)并沒有更新
這個(gè)問題困擾了我很長時(shí)間 偶然發(fā)現(xiàn)改變一個(gè)有v-model屬性的input框的value值時(shí) 按鈕的可選狀態(tài)更新了曹仗，
由此得出結(jié)論 是因?yàn)関ue沒有檢測到
image.png
看了一下我用來push給臨時(shí)數(shù)組的對象
果然
current_selectSpec: {},
是空的，所以并不是class沒給上，因?yàn)関ue的監(jiān)測機(jī)制 每條數(shù)據(jù)的監(jiān)測都是獨(dú)立的 所以在該次監(jiān)測中 current_selectSpec對象里面并沒有name 、option等鍵值杂腰，沒有初始化屬性，所以才會(huì)出現(xiàn)這種bug椅文。
改變v-model里的值時(shí) 由于另一個(gè)監(jiān)測讓頁面重新渲染 所以它的可選狀態(tài)跟著更新了喂很。
所以這里初始化一下這個(gè)對象的屬性
current_selectSpec: {name:'',option1:'',option2:''},
分割線
