Recibí un mensaje de error: TypeError no capturado: 'establecer' en el proxy: la trampa devolvió falso para la propiedad 'NewTodo'
Ese error aparece cuando intento restablecer el valor del texto de entrada dentro del componente secundario (FormAddTodo.vue).
Aplicación.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>Está utilizando v-model="NewTodo" donde NewTodo son los accesorios del componente.
Los accesorios no deben ser cambiados por el niño.
Use una variable v-model diferente y esto funcionará para usted.
Me había enfrentado a otras situaciones. Esta es una nota para otra persona que enfrenta el problema Uncaught TypeError: 'set' on proxy: trap returned falsish for property xxxxxx al usar this.$refs.componentName.propertyname = value; Para resolver el problema, podría usar una variable en su lugar.
Por ejemplo
<component-name :propertyname="variableA"> <script> export default = { components: { componentName, }, data() { variableA: 'default', }, methods: { changeValue(){ this.variableA = 'I_am_a_newValue'; }, }, } </script>