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

Question

我收到一条错误消息： Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'NewTodo'

当我尝试重置子组件（FormAddTodo.vue）内的输入文本值时，会出现该错误。

应用程序.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

您正在使用组件的 props v-model="NewTodo"。NewTodo

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

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