时间戳

首页 > 解决方案 > 错误 vue.js 中“todo”道具的意外突变（我正在使用 vue3）

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

问题描述

我正在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>

我正在传递的 todo 道具：

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

但它抛出一个错误错误“待办事项”道具的意外突变

标签： vue.js

解决方案

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

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

推荐阅读