vue v-for循环改变循环数据视图不更新
在前端开发中如下图菜单框架(左侧菜单内容由顶部菜单点击后动态更新data内 menu:[] )v-for循环menu显示左侧菜单问题:点击顶部菜单后(menu[]重新赋值),左侧菜单不能更新为新的menu[]里的内容。原因:由于 JavaScript 的限制, Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = ...
·
在前端开发中如下图菜单框架(左侧菜单内容由顶部菜单点击后动态更新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视图内容不更新的问题。
更多推荐
已为社区贡献1条内容
所有评论(0)