Vue3: Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'NewTodo'

Question

I got an error message: Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'NewTodo'

That error appear when im trying to reset the input text value inside child component (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

You are using v-model="NewTodo" where NewTodo is the props of the component.

Props are not ment to be changed from the child.

Use a diffrent v-model variable and this will work for you.

Answer 2

I had faced other situations. This is a note for someone else faces the issue Uncaught TypeError: 'set' on proxy: trap returned falsish for property xxxxxx when using this.$refs.componentName.propertyname = value; In order to solve the issue, you could use a variable instead.

For example

<component-name :propertyname="variableA">

<script>
export default =  {
         components: {
              componentName,
         },    
         data() {
              variableA: 'default',
         },
         methods: {
              changeValue(){
                   this.variableA = 'I_am_a_newValue';
              },
         },
    }
</script>