Vue3：未捕获的类型错误：代理上的“设置”：属性“NewTodo”的陷阱返回错误

Question

我收到一条错误消息： 未捕获的类型错误：代理上的“设置”：陷阱为属性“NewTodo”返回错误

当我尝试重置子组件 (FormAddTodo.vue) 中的输入文本值时出现该错误。

App.vue：

export default {
  data(){
    return{
      todos: [],
      newTodo: ""
    }
  },
  components: {
    Todos,
    FormAddTodo
  }
}
</script>

<template>
  <div class="container mx-auto">
      <Todos :todos="todos" />
      <div class="py-8"></div>
      <FormAddTodo :NewTodo="newTodo" :Todos="todos" />
  </div>
</template>

FormAddTodo.vue：

<template>
    <div class="formAddTodo">
        <form @submit.prevent="handleAddTodo" class="addTodo">
            <input type="text" class="" placeholder="type new todo here..." v-model="NewTodo">
        </form>
    </div>
</template>

<script>
    export default {
        props: ['NewTodo', 'Todos'],
        methods: {
            handleAddTodo(){
                const colors = ["cyan", "blue", "indigo", "pink"]
                const todo = {
                    id: Math.random(),
                    content: this.NewTodo,
                    color: colors[Math.floor(Math.random() * ((colors.length-1) - 0 + 1) + 0)]
                }

                this.Todos.push(todo)
                this.NewTodo = '' // this line throw the error
            }
        }
    }
</script>

Answer 1

您正在使用v-model="NewTodo"，其中NewTodo 是组件的道具。

道具不会从孩子身上改变。

使用不同的 v-model 变量，这对你有用。