vue 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视图内容不更新的问题。

vue v-for循环改变循环数据视图不更新相关推荐

vue数据改变了，视图不更新不刷新问题
vue数据改变了,视图不更新不刷新问题描述:在对象中添加一个属性 seen,初始想法使用for循环添加 seen 属性,然后改变这个属性去更新视图,然后发现不行. 解决,使用$set: this.$ ...
uni-app - 改变数据后视图无更新变化解决方案，更改数据不刷新（解决修改 data 中的数据视图未更新的问题）
前言当页面数据全部请求完毕,但用户操作导致数据改变时,视图并未按照最新数据进行更新. 有时候,我们动态改变数据的时候发现视图并未改变, 常见于在 methods 函数或其他位置中,改变 data 数 ...
vue循环渲染子组件视图不更新问题
最近在写一个功能,使用v-for循环渲染子组件:代码如下: 当datas的数据发生改变时,按理子组件展现的数据也应该重新渲染,不过在使用的时候并没有达到这样的效果,但是将循环渲染的子组件改成html标 ...
项目踩坑之Echarts数据视图不更新问题
问题描述 Echarts检测到数据更新不会立即更新相应的视图.也就是说即使series中data 或者value的值发生变化,Echarts也不会发生改变. 解决方法发送请求获取数据以后重新 ...
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
**一.**vue 2.6.11 vue****页面的生命周期? 总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后. 创建前/后: 在beforeCreate阶段,vue实例的挂载元素e ...
记录 uni-app 中对 data 的修改视图未更新的坑
之前只是了解过并没有实际的编写DEMO,如今公司想要采用多端统一编译框架,就想试试这个 uni-app,没想到刚开始就踩了个坑. 我在首页写了个定时器,1s 后修改内容 Hello 为 Change, ...
vue循环出来的数据，通过点击事件改变了数据，但是视图却没有更新
列表清单中,每一个列表的说明条件都只显示一条,点击实现折叠面板的效果,需求如下图: 给商品添加了text和flag,点击展开文字,数据进行了更新,但是视图没有变化 <div class=&quo ...
vue循环如何传参数 php,vue循环列表动态数据的处理方法（代码）
本篇文章给大家带来的内容是关于vue循环列表动态数据的处理方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 调用方法:Vue.set( target, key, value ...
vue点击事件，循环出来的关注列表，点击只关注其中一个并改变样式
vue点击事件, 循环出来的关注列表 ,点击只关注其中一个并改变样式这个适合大家参考,你们要是直接复制粘贴的话效果是出不来的,因为里面用了组件和api, <template><ul ...

vue v-for循环改变循环数据视图不更新

vue v-for循环改变循环数据视图不更新相关推荐

最新文章

热门文章