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

Question

我正在 vue.js 中制作一个 待办事项 应用程序，它有一个组件 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>

我要传递的 todo 道具：

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

但它抛出 错误 Unexpected mutation of “todo” prop

原文由 Omama Zainab 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 - 从不带同步修饰符的父组件传递道具，并在值更改时发出事件。对于此方法，其他所有内容也类似。只需要在待办事项更改为已完成时发出一个事件。

该代码未经测试。如果有任何问题，我们深表歉意。

原文由 Tharavink Prasad Sivarajan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

发生什么事 ？ ：在本地改变一个 prop 现在被认为是一种反模式，例如声明一个 prop 然后在组件中设置 this.myProp = ‘someOtherValue’。由于新的渲染机制，每当父组件重新渲染时，子组件的本地更改将被覆盖。

解决方案：您可以将其存储为本地数据。

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

原文由 user11695423 发布，翻译遵循 CC BY-SA 4.0 许可协议