List列表渲染时数据不更新怎么办？

A. 梓睿提问于 2026-03-12 10:40:20 阅读 3

组件

我在用 Vue 写一个待办事项列表，数据是通过 props 传进来的，但父组件数据变了，子组件的 List 却没重新渲染。明明 console.log 打印出来新数据是对的，可页面还是旧的。

我试过加 key，也试过用 watch 监听，但都不行。是不是我哪里写错了？相关代码大概是这样：

<template>
  <div v-for="item in todoList" :key="item.id">
    {{ item.text }}
  </div>
</template>

<script>
export default {
  props: ['todoList']
}
</script>

List列表数据展示

我来解答赞 3 收藏

反馈

1 条解答

UX-诗语 Lv1

问题大概率出在父组件修改数组的方式上。你是不是用了索引直接赋值 like this.todoList[0] = xxx？Vue 2 检测不到这种修改。

父组件那边改成这样就行：

// 方式1：重新赋值整个数组

this.todoList = [...this.todoList]



// 方式2：用 $set

this.$set(this.todoList, index, newItem)

或者如果你用的是 Vue 3，换成 Proxy 就没这破事了。

2026-03-12 11:02