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>
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.
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>