v-for列表中是定时器不会更新数据

Posted 2023-05-05

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

赞
感谢，帮我解决了让我郁闷几个小时的问题 参考技术A 在vue中使用v-for绑定数据时,经常会动态刷新数据,有时候会遇到刷新后没有动态自动更新绑定的展示数据,也就是说在函数中改变了页面中的某个值...

删除当前元素后 v-for 列表更新不正确

【中文标题】删除当前元素后 v-for 列表更新不正确

【英文标题】：v-for list is updated incorrectly after removing current element

【发布时间】：2020-08-08 23:50:58

【问题描述】：

请你帮帮我，我不知道如何处理。我有项目列表，其中每个项目都是一个组件，并且有自己的删除按钮。此按钮发出删除事件，将当前项目的键提交到 vuex 存储。因此，在我的 vuex 存储中，只发生了数组拼接。数组本身很好。但是 DOM 只显示最后一次删除 row ，而不是我点击。我在每个组件中都使用了 key，例如 vue documentation 。但我的代码仍然不起作用。 CentralPanel.vue(父)

div(v-for="(good,key) in goods" :key="key")
        goodItem(:goodProps="good" :goodsLength="goods.length" @update-row="updateChildRow($event)" @delete-item="$store.commit('goods/delete_current_good',key)")

goodItem.vue(子)

// All above just inputs
v-btn(@click="$emit('delete-item')" style=marginTop:'13px')
        v-icon mdi-trash-can-outline

商店

delete_current_good : (state,key) => 
    let goodsArr = state.goodsArray;
    goodsArr.splice(key,1);

【问题讨论】：

到目前为止您展示的内容应该可以工作。这意味着问题不在您到目前为止显示的代码中。请创建一个minimal reproducible example 以便其他人帮助您找到错误的根源。如果您需要基于多文件节点的环境，请使用 codesandbox.io（或类似的）。

我会告诉你谢谢！

【参考方案1】：

我相信，这是由 v-for 中的错误键引起的。我看到您正在迭代一个数组（因为您使用了拼接）所以第二个参数不是key - 它是index。

Vue通过key的属性区分循环中的元素。当您使用索引作为键时，它无法很好地跟踪项目。将其更改为每个元素的唯一值，例如good.someUniqueAttribute

此案例有描述：Why not always use the index as the key in a vue.js for loop?

【讨论】：

哦，非常感谢！我使用 Date().getTime() 作为我在项目对象中的唯一属性现在可以了 :))