v-for-160
刘耀文的大沙雕
钟意阿满
vue v-for 循环
Vue做项目过程中，经常使用v-for渲染多个重复组件或dom元素，比如：传递json/字典，利用v-for遍历json中的key和value，并渲染到页面中，改变元素的顺序，如下所示：
<el-card class="content-card" v-for="(questionsData,i) in form.questionsData">。
//具体的业务
......
</el-card>。
复制
然而，v-for在设计过程中，无法实现对数据的双向绑定，也就是说，当json_data中的key或value改变时，默认data中的json_data属性值可以改变，但是页面内容还是之前组件第一次渲染出来的结果，无法实现实时刷新。
解决方案
Vue中，v-if是条件渲染，每次状态更新都会重新删除或者创建元素，因此利用v-if可以实现template中代码的局部刷新(先删除，再创建)，但v-if有较高的切换性能消耗。
Vue官方中不推荐v-for和v-if在同一标签中共同使用。因此，给上述示例代码外面加上一层div，file_is_show为true时创建，为false时销毁。如下所示：
<template v-if="file_is_show">。
<el-card class="content-card" v-for="(questionsData,i) in form.questionsData">。
//具体的业务
......
</el-card>。
</template>。
复制
监听json_data数据改变，若json_data改变，元素先销毁，再创建，实现页面的局部刷新。
方法一
watch: {
// 监听json数据变化，重新渲染文件夹内容。
json_data(newVal) {。
this.file_is_show = false。
if (true) {。
this.$nextTick(()=>{ // $nextTick 是在 DOM 更新循环结束之后执行延迟回调。
this.file_is_show = true。
})
}
}
复制
方法二
//下移 将当前数组index索引与后面一个元素互换位置，向数组后面移动一位。
zIndexDown(arr, row) {。
let index = arr.indexOf(row);。
if (index + 1 != arr.length) {。
this.swapArray(arr, index, index + 1);。
} else {
this.$modal.msgWarning("已是最后，无法下移");。
}
},
//上移 将当前数组index索引与前面一个元素互换位置，向数组前面移动一位。
zIndexUp(arr, row) {。
let index = arr.indexOf(row);。
if (index != 0) {。
this.swapArray(arr, index, index - 1);。
} else {
this.$modal.msgWarning("已是第一个，无法上移");。
}
},
/**
* 数组元素交换位置
* @param {array} arr 数组。
* @param {number} index1 添加项目的位置。
* @param {number} index2 删除项目的位置。
* index1和index2分别是两个数组的索引值，即是两个要交换元素位置的索引值，如1，5就是数组中下标为1和5的两个元素交换位置。
*/
swapArray(arr, index1, index2) {。
arr[index1] = arr.splice(index2, 1, arr[index1])[0];。
this.file_is_show = false。
if (true) {。
this.$nextTick(()=>{ // $nextTick 是在 DOM 更新循环结束之后执行延迟回调。
this.file_is_show = true。
})
}
}
复制
注意
this.$nextTick是在DOM更新之后才会调用里面的内容。
如果不加这句话，json_data 改变，file_is_show先false，然后马上更新为true。而原本file_is_show就是true，所以DOM不会实现刷新。
nextTick的使用可以在dom销毁之后再执行回调函数（创建功能），这样才能达到销毁->创建，达到局部更新的功能。
html5
vue.js
现在的人都在用这款折叠手机，你还在等什么？
精选推荐
广告
vue中v-for绑定数组，当数组变化时页面数据不更新（已解决）
1.5W阅读·1评论·15点赞。
2020年1月24日
vue中使用v-for渲染的列表当某项数据变动时视图列表没有更新问题解决。
1638阅读·2评论·1点赞
2021年2月9日
vue 修改v-for 循环内的item数据视图不刷新。
434阅读·0评论·0点赞
2022年11月15日
Vue中的v-for指令不起效果的解决方法。
0下载·0评论
2020年12月29日
Vue中v-for的属性修改后不能及时的渲染数据。
833阅读·0评论·1点赞
2020年6月23日
Vue中v-for隐藏的坑 - 不能实时更新。
3798阅读·0评论·2点赞
2019年8月26日
超人气解压版《海岛奇兵》！
精选推荐
广告
v-for循环加载el-card并控制自动展开收起。
1.3W阅读·0评论·1点赞
2017年6月21日
js v-for 数据变动时没有实时更新列表。
359阅读·0评论·0点赞
2022年7月12日
vue3中数据更新，视图没有更新解决方案。
463阅读·0评论·0点赞
2022年11月21日
Vue 列表渲染 v-for循环。
811阅读·0评论·1点赞
2019年5月27日
vue v-for循环修改属性后页面不重新渲染。
1851阅读·0评论·1点赞
2020年6月22日
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
2639阅读·1评论·1点赞
2020年8月22日
Vue2.0 vue v-for循环，改变循环数据视图不更新。
1131阅读·0评论·0点赞
2019年10月17日
VUE中v-for绑定数组，当数组变化时页面页面数据不更新问题。
6790阅读·0评论·4点赞
2020年9月8日
解决vue的数组渲染不更新的问题。
1330阅读·0评论·0点赞
2021年4月5日
vue v-for循环改变循环数据视图不更新。
1.0W阅读·2评论·6点赞
2019年7月11日
【vue】使用vue时可以通过 this.$forceUpdate() 强制刷新页面数据（用于v-for循环值刷新中）
1287阅读·0评论·0点赞
2022年6月14日
v-for解决数据渲染刷新问题。
1078阅读·0评论·0点赞
2021年5月31日
去首页
看看更多热门内容
评论2
mR1300
赞
局部v-if加watch很管用，谢谢。
2022.06.21
weixin_44474752。
赞
感谢，帮我解决了让我郁闷几个小时的问题。
抱起亚轩找小葵
<i class="layui-icon">{{ lx.zs }}</i>。
{{ lx.text }}
在v-for的元素内直接加上即可。
大圣杰锅是
小韩在追星
小韩在追星