vue中v-for中数据状态值变了,但是视图没改变
一.问题现象:1.你在v-for中列表的每个item都有个按钮,你点击按钮,想把按钮的类名通过一个属性show,type为boolean来动态的选择2.v-show通过每个item这个show的true还是false来显示最后发现你在点击后,输出发现,true,false都有变,但是感觉似乎试图没有重新渲染。通过搜索,发现v-for对于数组添加和删除的操作,不会进行二次绚烂,但是这不是添加和删除
·
一.问题现象:
1.你在v-for中列表的每个item都有个按钮,你点击按钮,想把按钮的类名通过一个属性show,type为boolean来动态的选择
2.v-show通过每个item这个show的true还是false来显示
最后发现你在点击后,输出发现,true,false都有变,但是感觉似乎试图没有重新渲染。通过搜索,发现v-for对于数组添加和删除的操作,不会进行二次绚烂,但是这不是添加和删除 ,只是进行值状态的改变,即修改。似乎感觉以前也是这么写就没问题。
二.问题出现原因:
1.你肯定这个属性是通过下标来动态添加的,其实本质还是满足了对数组添加的操作。代码可能是类似这样的。
data(){
productDetailList: [],
list: [{
id: 1,
show: true,
name: '1111'
},
{
id: 2,
show: true,
name: '222'
},
}
var info = JSON.parse(JSON.stringify(res.data.info))
this.productDetailList = info.productDetailList
for (var i = 0; i < this.productDetailList.length; i++) {
this.productDetailList[i].show = true
}
上面在vue中list列表这样我直接把show属性写出来,最后按以往写法是没问题的,能实现试图和数据双向绑定。
所以不同就明显了,就是差在这个show属性我这回是通过角标动态加的。而vue对于这种不能监听的到。
vue当然有解决方案
三.问题解决
使用Vue的set方法,使用之前要引入
<script>
import Vue from 'vue'
1.页面
<view class="item-wrap" v-for="(product,index) in productDetailList" :key="index">
<button :class="product.show == true ?
'iconfont icon-weibiaoti1 item-btn' : 'iconfont icon-xiangxia item-btn'"
@click="show(product,index)"></button>
<view v-show="product.show == true ? true : false">
<view class="item-grid" style="">
<button type="default" class="fold-btn" @click="hideAll">全部折叠</button>
2.方法
methods: {
hideAll(){
var arr=this.productDetailList
for(var i=0;i<arr.length;i++){
arr[i].show=false
Vue.set(this.productDetailList,i,arr[i])
}
},
show(product, index) {
product.show=!product.show
Vue.set(this.productDetailList,index,product)
},
在此记录下,希望帮到和我一样掉坑的人。
更多推荐
已为社区贡献3条内容
所有评论(0)