Em uma pergunta do SOen, foi dito que se usar o gerenciador de estado Vuex, os métodos $delete
e ,provavelmente, o $set
não devem estar diponíveis, oque pode explicar a mensagem de erro this.$delete is not a function
.
O indicado seria usar Vue.delete
, mas dee acordo com a documentação, este deve ser usado raramente deve ser usado:
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.
Neste caso, como seu estado é um array this.todos
, alterar este objeto usando simples métodos de array, irá ser o suficiente.
Finalizar uma tarefa
Que tal usar o 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
});
},
Veja um exemplo para entender a lógica:
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)
Remover uma tarefa
Que tal o 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
},
Veja um exemplo para entender a lógica:
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
Como o Vue trabalha com o conceito de View em função do estado (como já mencionei aqui), alterar o valor de this.todos
vai ocasionar uma atualização da view.
this.todos.splice(index, 1);
?Vue.delete(..)
e raramente deve ser usado. O mesmo vale para o$set
, creio eu. Então, porque não trabalha diretamente com esse estado usando somente métodos de array?