Error vuejs 'this. $delete is not a Function'

Asked

Viewed 29 times

-1

I already have a theory of what could be this error, I have done a course in Vue2 but I am with Vue3 at a given time the course passes two functions to finish the task and to delete the same:

Add:

toggleTodo(todo) {
      const index = this.todos.findIndex(item => item.id === todo.id);
      if (index > -1) {
        const checked = !this.todos[index].checked;
        this.$set(this.todos, index, { ...this.todos[index], checked });
      }
},

Erase:

removeTodo(todo) {
      const index = this.todos.findIndex((item) => item.id === todo.id);
      if (index > -1) {
        this.$delete(this.todos, index)
      }
    },

But for both I have a return: this.$set is not a function and this.$delete is not a function, but I can’t figure out how to fix them. Someone can help me?

javascript vue.js vue.js-2

  • SS in $set I try to enter a new task and in $delete I try to delete it from array.

  • Why not this.todos.splice(index, 1);?

  • Here says it would be Vue.delete(..) and rarely should be used. The same goes for the $set, believe me. So why not work directly with this state using only array methods?

  • I’ll post an answer....

1 answer

1


In a question from Soen, was said to use the Vuex state manager, the methods $delete and probablythe $set must not be accessible, which may explain the error message this.$delete is not a function.

The appropriate would be to use Vue.delete, but dee according to the documentation, this should be used rarely should be used:

Delete a Property on an Object. If the Object is reactive, ensure the Deletion triggers view updates. This is primarily used to get Around the limitation that Vue cannot Detect Property deletions, but you should rarely need to use it.

In this case, as its state is an array this.todos, change this object using simple array methods, it will be enough.

Finish a task

How about using the map?:

toggleTodo(todo) {
  this.todos = this.todos.map((item) => {
    if (item.id === todo.id) {
      item.checked = !item.checked // inverte o estado do 'checked'
    }

    return item
  });
},

See an example to understand the logic:

var persons = [
  { id: 1, checked: false },
  { id: 2, checked: false },
  { id: 3, checked: false }
];

persons = persons.map(item => {
 if (item.id === 3) item.checked = true
 
 return item
})

console.log(persons)

Remove a task

How about the splice?:

removeTodo(todo) {
  const index = this.todos.findIndex((item) => item.id === todo.id);

  if (index > -1) {
   this.todos.splice(index, 1); // não precisa reatribuir ao this.todos 
  }                             // pois 'splice' já altera o array original
},

See an example to understand the logic:

var persons = [{
    id: 1,
    checked: false
  },
  {
    id: 2,
    checked: false
  },
  {
    id: 3,
    checked: false
  }
];

const index = persons.findIndex((item) => item.id === 3);

if (index > -1) {
  persons.splice(index, 1); 
}

console.log(persons) // removeu o item de id 3

How Vue works with the View concept based on the state (as I mentioned earlier here), change the value of this.todos will cause a view update.

Browser other questions tagged javascript vue.js vue.js-2

You are not signed in. Login or sign up in order to post.