vue已经循环出来的数据，通过方法点击事件改变了数据，但页面数据没有更新

Question

 <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;        }                         

Answer 1

先设置为 响应式数据

for (let i = 0; i < _this.myCollectList.length; i++) {

              _this.$set(_this.myCollectList[i], 'selected', false)

            }

        

此时可以改变数据，视图就会改变

 selectMyCollectList(item,index) {

    item.selected = !item.selected;

    }

    

通过this.$set 设置为响应式数据，数据改变后，视图就会变化

Answer 2

this.$set(item, 'selected', !item.selected)

Answer 3

:key="index"

key是绑定你循环的数组里面的index的

Answer 4

 selectMyCollectList(item,index) {

        item.selected = !item.selected;

        }

这个方法是没有问题的，可以这么试试打印到页面看看数据变化，应该是其他地方有问题。

<span>{{item.selected}}</span><i class="el-icon-check" v-show="item.selected"></i>

Answer 5

点击改变数据，得改变data里面的数据，这个方法改下：

selectMyCollectList(item,index) {

    this.myCollectList[index]['selected']=!this.myCollectList[index]['selected'];

}

Answer 6

题主用的是老版本的vue吗？我最近面试的时候也碰到这个问题了，但是我的页面数据是实时更新的，用题主的代码在我项目里面跑也没出现页面不更新的问题不知道为什么。