前兩天漆枚，在工作中遇到一個(gè)特別難搞的問(wèn)題竞川，搞笑的是做夢(mèng)夢(mèng)到自己解決了，醒來(lái)卻忘記了解決辦法酒唉，確實(shí)挺絕望了矩桂，還好最后搞出來(lái)了，跟大家分享下我遇到的問(wèn)題
我是用的element里面的 el-switch組件
<el-switch
v-model="item.isOn"
:active-value=true
:inactive-value=false
:disabled="item.isDisableSwitch"
@change="switchChange($event,item,index)"
inactive-text="開(kāi)啟活動(dòng)推薦">
</el-switch>
這個(gè)開(kāi)關(guān)是放在一個(gè)商品里面的痪伦，大致邏輯就是侄榴，按條件搜索出相關(guān)商品，當(dāng)選中商品時(shí)才可以設(shè)置是否開(kāi)啟活動(dòng)推薦网沾，item.isOn是控制el-switch是否開(kāi)啟癞蚕，(true為開(kāi)啟)；item.isDisableSwitch設(shè)置是否禁用該el-switch開(kāi)關(guān)
備注下：isOn,和isDisableSwitch都是我在拿到搜索出的商品信息后給每個(gè)商品添加的狀態(tài)辉哥，我在data中增加一個(gè)數(shù)組checkSwitch:[],用于存放選中的switch集合桦山，searchGoodsList用于存放條件搜索出來(lái)的所有商品數(shù)據(jù)
初始時(shí)遍歷所有的商品數(shù)據(jù)，并給初始商品數(shù)據(jù)的isOn醋旦，isDisableSwitch賦值恒水，但是在這里面需要判斷一下
for(let i=0;i<this.searchGoodsList.length;i++){
// 重新搜索 若商品的活動(dòng)推薦已經(jīng)開(kāi)啟 則開(kāi)啟活動(dòng)狀態(tài) 此時(shí)的活動(dòng)推薦應(yīng)該為可用狀態(tài)
let indx = this.checkSwitch.indexOf(this.searchGoodsList[i].id);
if(indx != -1){
this.searchGoodsList[i].isOn=true;
this.searchGoodsList[i].isDisableSwitch=false;
}else{
this.searchGoodsList[i].isOn=false;
}
// 重新搜索 若選擇的商品活動(dòng)推薦未開(kāi)啟 則此時(shí)的開(kāi)啟活動(dòng)推薦 應(yīng)顯示可用狀態(tài)
let inx = this.checkList.indexOf(this.searchGoodsList[i].id);
if(inx != -1){
this.searchGoodsList[i].isDisableSwitch=false;
}else{
this.searchGoodsList[i].isDisableSwitch = true;
}
}
但是頁(yè)面上的推薦開(kāi)關(guān)點(diǎn)擊去沒(méi)有反應(yīng)
并且當(dāng)我有別的操作，比如點(diǎn)擊旁邊商品按鈕或者切換搜索條件時(shí)饲齐，就有反應(yīng)了钉凌，感覺(jué)總是慢半拍
我這邊把點(diǎn)擊時(shí)加的@change事件，把點(diǎn)擊后此商品的isOn打印出來(lái)捂人，顯示為true御雕，但是點(diǎn)擊按鈕就是沒(méi)反應(yīng)
// 活動(dòng)開(kāi)啟
switchChange($event,item,index){
console.log(item.isOn,'item.isOn');
// 不傳值 則默認(rèn)值為true / false
if(!item.isDisableSwitch){
if($event){
if(this.checkSwitch.length<5){
this.checkSwitch.push(item.id);
}
}
else{//如果此時(shí)把開(kāi)啟的活動(dòng)推薦關(guān)閉
for(let i=0;i<this.checkSwitch.length;i++){
if(this.checkSwitch[i]==item.id){
this.checkSwitch.splice(i,1);
}
}
}
}
},
我開(kāi)始推測(cè)可能是新的屬性沒(méi)有觸發(fā)數(shù)據(jù)更新
于是我使用的
$set方法在判斷里面this.$set(item,'isOn',true)，或者this.$set(item,'isOn',false),但是還是沒(méi)反應(yīng)為了確確定它執(zhí)行了我的操作判斷先慷，我在@change里面的判斷中饮笛，各打印了1和2，控制臺(tái)里面也顯示了
我開(kāi)始推測(cè)可能是數(shù)據(jù)源頭出了問(wèn)題论熙，也就是搜索出來(lái)的時(shí)候數(shù)據(jù)鎖死了福青，所以后來(lái)點(diǎn)擊怎么也不改變，我在@change事件中將搜索出來(lái)的所有商品打印出來(lái)，但是發(fā)現(xiàn)无午，此時(shí)我點(diǎn)擊的商品的isOn已經(jīng)改變了
我猜可能是searchGoodsList數(shù)據(jù)沒(méi)更新吧
for(let i=0;i<this.searchGoodsList.length;i++){
this.$set(this.searchGoodsList[i],'isOn',item.isOn);
}
還是不行媒役，百度了下，鋪天蓋地都是提示我視圖不更新宪迟，我甚至跑到搜索點(diǎn)擊后把每條搜索出來(lái)的數(shù)據(jù)也更新了下還是不行
最后中午用手機(jī)來(lái)百度酣衷，看到一個(gè)跟別的不一樣的方法，于是抱著試試的態(tài)度加上去了
// 活動(dòng)開(kāi)啟
switchChange($event,item,index){
console.log(item.isOn,'item.isOn');
// 不傳值 則默認(rèn)值為true / false
if(!item.isDisableSwitch){
if($event){
this.$forceUpdate();//強(qiáng)制重新渲染頁(yè)面
if(this.checkSwitch.length<5){
this.checkSwitch.push(item.id);
}
}
else{//如果此時(shí)把開(kāi)啟的活動(dòng)推薦關(guān)閉
this.$forceUpdate();//強(qiáng)制重新渲染頁(yè)面
for(let i=0;i<this.checkSwitch.length;i++){
if(this.checkSwitch[i]==item.id){
this.checkSwitch.splice(i,1);
}
}
}
}
},
但是次泽，但是竟然成功了穿仪，激動(dòng)呀_
所以百度了下this.$forceUpdate()這個(gè)用法用于 強(qiáng)制刷新，用于解決v-for中修改某個(gè)屬性值后頁(yè)面v-if不改變的問(wèn)題意荤，也就是因?yàn)閿?shù)據(jù)層次太多啊片，render函數(shù)沒(méi)有自動(dòng)更新，需手動(dòng)強(qiáng)制刷新組件
最后感謝https://blog.csdn.net/jerryyang_2017/article/details/82467016的分享玖像，希望也能幫到你們
