猿问

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

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

        }

        

       

       

   


人到中年有点甜
浏览 4128回答 6
6回答

慕哥6287543

先设置为 响应式数据for (let i = 0; i < _this.myCollectList.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _this.$set(_this.myCollectList[i], 'selected', false)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;此时可以改变数据,视图就会改变&nbsp;selectMyCollectList(item,index) {&nbsp; &nbsp; item.selected = !item.selected;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;通过this.$set 设置为响应式数据,数据改变后,视图就会变化

德玛西亚99

this.$set(item,&nbsp;'selected',&nbsp;!item.selected)

潇潇雨雨

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

森林海

&nbsp;selectMyCollectList(item,index) {&nbsp; &nbsp; &nbsp; &nbsp; item.selected = !item.selected;&nbsp; &nbsp; &nbsp; &nbsp; }这个方法是没有问题的,可以这么试试打印到页面看看数据变化,应该是其他地方有问题。<span>{{item.selected}}</span><i class="el-icon-check" v-show="item.selected"></i>

手掌心

点击改变数据,得改变data里面的数据,这个方法改下:selectMyCollectList(item,index) {&nbsp; &nbsp; this.myCollectList[index]['selected']=!this.myCollectList[index]['selected'];}

泛舟湖上清波郎朗

题主用的是老版本的vue吗?我最近面试的时候也碰到这个问题了,但是我的页面数据是实时更新的,用题主的代码在我项目里面跑也没出现页面不更新的问题不知道为什么。
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答