v-for列表中是定时器不会更新数据
发布网友
发布时间：2023-02-08 13:22
共2个回答
热心网友
时间：2024-11-24 18:30
<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
赞
感谢，帮我解决了让我郁闷几个小时的问题
热心网友
时间：2024-11-24 18:31
