鍍金池/ 問答/人工智能  HTML/ vue已經(jīng)循環(huán)出來的數(shù)據(jù)，通過方法點(diǎn)擊事件改變了數(shù)據(jù)，但頁面數(shù)據(jù)沒有更新

vue已經(jīng)循環(huán)出來的數(shù)據(jù)，通過方法點(diǎn)擊事件改變了數(shù)據(jù)，但頁面數(shù)據(jù)沒有更新

 <div class="condition" :style="{background: item.collectColor}" v-for="(item,index) in myCollectList" :key="item.id"
             @click="selectMyCollectList(item,index)">
          <span>{{item.collectTitleName}}</span><i class="el-icon-check"  v-show="item.selected"></i>
        </div>
        
        方法
        selectMyCollectList(item,index) {
        item.selected = !item.selected;
        }
回答
編輯回答
裸橙

先設(shè)置為 響應(yīng)式數(shù)據(jù)

for (let i = 0; i < _this.myCollectList.length; i++) {
              _this.$set(_this.myCollectList[i], 'selected', false)
            }

此時(shí)可以改變數(shù)據(jù)，視圖就會(huì)改變

 selectMyCollectList(item,index) {
    item.selected = !item.selected;
    }
    

通過this.$set 設(shè)置為響應(yīng)式數(shù)據(jù)，數(shù)據(jù)改變后，視圖就會(huì)變化
2018年8月20日 23:44
編輯回答
短嘆

點(diǎn)擊改變數(shù)據(jù)，得改變data里面的數(shù)據(jù)，這個(gè)方法改下：

selectMyCollectList(item,index) {
    this.myCollectList[index]['selected']=!this.myCollectList[index]['selected'];
}
2017年10月21日 11:02
編輯回答
絯孑氣

題主用的是老版本的vue嗎？我最近面試的時(shí)候也碰到這個(gè)問題了，但是我的頁面數(shù)據(jù)是實(shí)時(shí)更新的，用題主的代碼在我項(xiàng)目里面跑也沒出現(xiàn)頁面不更新的問題不知道為什么。

2018年3月6日 17:18
編輯回答
我不懂
  selectMyCollectList(item,index) {
        item.selected = !item.selected;
        }

這個(gè)方法是沒有問題的，可以這么試試打印到頁面看看數(shù)據(jù)變化，應(yīng)該是其他地方有問題。

 <span>{{item.selected}}</span><i class="el-icon-check"  v-show="item.selected"></i>
2018年1月23日 00:12
編輯回答
初念
:key="index"

key是綁定你循環(huán)的數(shù)組里面的index的

2017年3月13日 15:09
編輯回答
情未了
this.$set(item, 'selected', !item.selected)
2018年2月20日 22:06