vue中v-for数据状态值变了,但是视图没改变的解决方案
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) },
v-for循环改变循环数据视图不更新
在前端开发中如下图菜单框架(左侧菜单内容由顶部菜单点击后动态更新data内 menu:[] )v-for循环menu显示左侧菜单
问题:点击顶部菜单后(menu[]重新赋值),左侧菜单不能更新为新的menu[]里的内容。
原因:
- 由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如: vm.items.length = newLength
解决1
为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状态更新:
// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue)
避免第二种情况,使用 splice:
example1.items.splice(newLength)
解决2
v-循环时K值选择数组对象的name或其他不唯一值如下图
原因:key表示的属性在变化时,强制更新组件,这样就会解决vue不能检测数据变动导致v-for视图内容不更新的问题。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/weixin_42551915/article/details/106490
相关文章
- 本文给大家分享C#连接SQL数据库和查询数据功能的操作技巧,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友参考下吧...2021-05-17
- 最基础的对数据的增加删除修改操作实例,菜鸟们收了吧...2013-09-26
- 这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了详解如何清理redis集群的所有数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 在php中解析xml文档用专门的函数domdocument来处理,把json在php中也有相关的处理函数,我们要把数据xml 数据存到一个数据再用json_encode直接换成json数据就OK了。...2016-11-25
- 这篇文章主要介绍了mybatis-plus 处理大数据插入太慢的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-18
- 这篇文章主要介绍了postgresql数据添加两个字段联合唯一的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-04
Vue生命周期activated之返回上一页不重新请求数据操作
这篇文章主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26- 这篇文章主要介绍了c# socket网络编程,server端接收,client端发送数据,大家参考使用吧...2020-06-25
- 这篇文章主要介绍了解决vue watch数据的方法被调用了两次的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07
- 这篇文章主要介绍了vue 数据(data)赋值问题的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-29
- 这篇文章主要介绍了Python3 常用数据标准化方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-24
- 这篇文章主要为大家详细介绍了node.js从数据库获取数据的具体代码,nodejs可以获取具体某张数据表信息,感兴趣的朋友可以参考一下...2016-05-09
- 本文主要介绍AngularJS 视图,这里整理了相关知识,并附代码示例和实现效果图,有兴趣的小伙伴可以参考下...2016-08-27
- 使用下以两种方法时必须把字段设为”主键(PRIMARY KEY”或”唯一约束(UNIQUE)”。1:使用REPLACE INTO (此种方法是利用替换的方法,有点似类于先删除再插入) 复制代码 代码如下:REPLACE INTO Syntax REPLACE [LOW_PRIO...2013-10-04
- 这篇文章主要介绍了PostgreSQL 恢复误删数据的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-18
- 这篇文章主要介绍了C#实现窗体间传递数据实例,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了postgresql 删除重复数据的几种方法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05