Vue中删除数据后列表没更新是怎么回事？

南宫玉戈提问于 2026-03-15 10:04:24 阅读 2

交互

我用 Vue 做了个简单的待办列表，添加和编辑都正常，但点击删除后页面上的列表没变化，虽然控制台打印的数组长度确实减少了。是不是响应式出了问题？

我试过用 splice 和 filter，也用了 this.$forceUpdate()，都不行。下面是关键代码：

<template>
  <div v-for="item in todos" :key="item.id">
    {{ item.text }}
    <button @click="removeTodo(item.id)">删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [{ id: 1, text: '学习CRUD' }]
    }
  },
  methods: {
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    }
  }
}
</script>

CRUD操作数据交互

我来解答赞 1 收藏

反馈

暂无解答