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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.