-1

Eu já tenho uma teoria do que pode ser esse erro, tenho feito um curso em Vue2 mas estou com o Vue3 num dado momento o curso passa duas funções de finalizar a tarefa e de apagar a mesma:

Adcionar:

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 });
      }
},

Apagar:

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

Mas para as duas tenho um retorno: this.$set is not a function e this.$delete is not a function, mas não consigo achar como resolve-los. Alguém pode me ajudar?

4
  • SS no $set eu tento entrar com uma nova tarefa e no $delete eu tento apagar ele do array. Commented 19/05/2021 às 0:15
  • Porque não fazer this.todos.splice(index, 1);? Commented 19/05/2021 às 0:17
  • Aqui diz que seria 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? Commented 19/05/2021 às 0:26
  • Vou postar uma resposta.... Commented 19/05/2021 às 0:36

1 Resposta 1

1

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .