CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Zulfikar Ahmad
Zulfikar Ahmad

Reputation: 504

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

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>

Upvotes: 20

Views: 58178

Answers (5)

Z.T
Z.T

Reputation: 485

I faced similar issue, in case somebody else checks the thread for my type of issue here is what I did:

check your getter and setter in case you are assigning a different variable in getter/setter, you need to modify the same everywhere

In my case I was returning _tableData in getter or tableData. I had to modify _tableData everywhere in the code instead of tableData directly.

my code was as follow:

get tableData(){
    return this._tableData;
}
 hideAndShowNew(event){
       let Allrecs = [...this.tableData];
            let recs = Allrecs.filter((elem) => elem.key === compareKey)[0];
recs.showFlag = true;
            Allrecs[targetIndex] = recs;
//The below line was throwing the error
             this.tableData = [...Allrecs]; 
//SOLUTION change tableData to _tableData
this._tableData = [...Allrecs]; 
 
    }

Upvotes: 0

Motomotes
Motomotes

Reputation: 4237

One may emit an update event to change the property on the parent,

<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.$emit('update:NewTodo', ''); // this line updates NewTodo
            }
        }
    }
</script>

But like others have said, parent properties should not really be updated, it is more expensive and can lead to anti-patterns, in this case I think one merely wants an internal variable:

<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'],
        data(){
          return {
             _NewTodo: this.NewTodo; //private NewTodo
          }
        },
        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 = '';
            }
        }
    }
</script>

Upvotes: 0

Dmitry Kurowsky
Dmitry Kurowsky

Reputation: 340

Sometimes this problem can occur due to the same names in state, getters, actions. In my case it was this.app (state) and app (getter). As soon as I renamed state property to this._app, the problem is gone.

P.S.: removing getter 'app' was a more elegant solution to the problem (in my case). Getters are like computed, they are only useful if they return a modified version of the state.

Upvotes: 5

Epic Chen
Epic Chen

Reputation: 1382

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>

Upvotes: 2

Nitheesh
Nitheesh

Reputation: 20006

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.

Upvotes: 26

Related Questions