Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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" />
</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>
</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>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.