错误 vue.js 中“todo”道具的意外突变（我使用的是 vue3）

Question

我正在vue.js 中制作一个todo应用程序，它有一个组件TodoItem

<template>
  <div class="todo-item" v-bind:class="{'is-completed':todo.completed}">
    <p>
      <input type="checkbox" @change="markCompleted" />
      {{todo.task}}
      <button class="del">x</button>
    </p>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  props: ["todo"],
  methods: {
    markCompleted() {
      this.todo.completed = true
    },
  },
};
</script>

我正在传递的待办事项道具：

{
  id:1,
  task:'todo 1',
  completed:false
}

但它抛出一个错误错误“todo”道具的意外突变

Answer 1

方法 1 (Vue 2.3.0+) - 从你的父组件，你可以传递带有同步修饰符的prop

父组件

<TodoItem v-for="todo in todoList" :key="todo.id" todo_prop.sync="todo">

子组件

    <template>
      <div class="todo-item" v-bind:class="{'is-completed':todo.completed}">
        <p>
          <input type="checkbox" @change="markCompleted" />
          {{todo.task}}
          <button class="del">x</button>
        </p>
      </div>
    </template>
    
    <script>
    export default {
      name: "TodoItem",
      props: ["todo_prop"],
      data() {
         return {
            todo: this.todo_prop
         }
      },
      methods: {
        markCompleted() {
          this.todo.completed = true
        },
      },
    };
    </script>

方法 2 - 在没有同步修饰符的情况下从父组件传递 props 并在值更改时发出事件。对于这种方法，其他一切也类似。只需要在待办事项更改为完成时发出一个事件。

代码未经测试。如果有什么不起作用，请道歉。

Answer 2

本地改变 prop 现在被认为是一种反模式，例如声明一个 prop，然后this.myProp = 'someOtherValue'在组件中设置。由于新的渲染机制，每当父组件重新渲染时，子组件\xe2\x80\x99的本地更改都会被覆盖。

\n

解决办法：可以将其存储为本地数据。

\n

export default {\n  name: "TodoItem",\n  props: ["todo"],\n  data() {\n    return {\n      todoLocal: this.todo,\n    };\n  },\n  methods: {\n    markComplete() {\n      this.todoLocal.completed = !this.todoLocal.completed;\n    },\n  },\n};\n

\n