vue v-for 数据修改后，页面没变化，分析与解决

简单的示例

<div v-for="data in paper" :key="data.id">
    <PImg :textObj="data" />
    {{data}}
div>
1
2
3
4

paper的数据格式如下：

[
	{
        id:xxx,
        value:xxx,
    },
    ...
]
1
2
3
4
5
6
7

若只更改paper某个value的数据:

• {{data}} 中的数据会变化

• pImg组件的数据不会变化

  只改变了value，:key=“data.id”`没有变，vue不知道数据发生了变化，仍然使用上一次的虚拟dom，故新数据显示不出来。

在修改数据时，用一个新对象替代原来对象的做法是不对的，这样也会导致vue感知到不到数据的变化

❌

state.data[key] = {
      value: newValue,
      id: nanoid(),
}
1
2
3
4

必须逐个修改对象的值：

for (const key in paper) {
    if (paper[key].id == id) {
        paper[key].id = nanoid();
        paper[key].value = newValue;
    }
}
1
2
3
4
5
6