Como remover um item de uma matriz em Vue.js

Eu sou novo no vue.js (2) e atualmente estou trabalhando em um aplicativo de evento simples. Consegui adicionar eventos, mas agora gostaria de excluí-los clicando em um botão.

HTML

    <div class="list-group">

        <div class="list-group-item" v-for="event in events">
            <h4 class="list-group-item-heading">
                {{ event.name }}
            </h4>

            <h5>
                {{ event.date }}
            </h5>

            <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

            <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
        </div>

    </div>
</div>

JS (Vue)

new Vue ({
    el: '#app',

    data: {
        events: [
            {
                id: 1,
                name: 'Event 1',
                description: 'Just some lorem ipsum',
                date: '2015-09-10'
            },
            {
                id: 2,
                name: 'Event 2',
                description: 'Just another lorem ipsum',
                date: '2015-10-02'
            }
        ],

        event: { name: '', description: '', date: '' }
    },

    ready: function() {

    },

    methods: {

        deleteEvent: function(event) {
                this.events.splice(this.event);
        },

        // Adds an event to the existing events array
        addEvent: function() {
            if(this.event.name) {
                this.events.push(this.event);
                this.event = { name: '', description: '', date: '' };
            }
        }

    } // end of methods

});

Já tentei passar o evento para a função e depois deletar aquele com a função slice, pensei que era aquele código para deletar alguns dados do array. Qual é a melhor maneira mais limpa de excluir dados do array com um botão simples e um evento onclick?

Você está usando de splicemaneira errada.

As sobrecargas são:

array.splice (iniciar)

array.splice (start, deleteCount)

array.splice (start, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)

Iniciar significa o índice que você deseja iniciar, não o elemento que deseja remover. E você deve passar o segundo parâmetrodeleteCount como 1, o que significa: "Quero deletar 1 elemento começando no índice {start}".

Então é melhor você ir com:

deleteEvent: function(event) {
  this.events.splice(this.events.indexOf(event), 1);
}

Além disso, você está usando um parâmetro, para acessá-lo diretamente, não com this.event.

Mas desta forma você parecerá desnecessário indexOfem cada deleção, para resolver isso você pode definir a indexvariável em seu v-for, e então passá-la ao invés do objeto de evento.

Isso é:

v-for="(event, index) in events"
...

<button ... @click="deleteEvent(index)"

E:

deleteEvent: function(index) {
  this.events.splice(index, 1);
}

Você também pode usar. $ Delete:

remove (index) {
 this.$delete(this.finds, index)
}

fontes:

• https://vuejs.org/v2/api/#Vue-delete
• https://medium.com/vuejs-tips/tip-3-deleting-array-index-in-vue-js-8cc31d7214bf

Não se esqueça de ligar atributo de chave, caso contrário sempre o último item será excluído

Maneira correta de excluir o item selecionado da matriz:

Modelo

<div v-for="(item, index) in items" :key="item.id">
  <input v-model="item.value">
   <button @click="deleteItem(index)">
  delete
</button>

roteiro

deleteItem(index) {
  this.items.splice(index, 1); \\OR   this.$delete(this.items,index)
 \\both will do the same
}

É ainda mais engraçado quando você está fazendo isso com entradas, porque elas devem ser vinculadas. Se você estiver interessado em como fazer isso no Vue2 com opções para inserir e excluir, veja um exemplo:

por favor dê uma olhada no js violino

new Vue({
  el: '#app',
  data: {
    finds: [] 
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: 'def' });
    },
    deleteFind: function (index) {
      console.log(index);
      console.log(this.finds);
      this.finds.splice(index, 1);
    }
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value">
    <button @click="deleteFind(index)">
      delete
    </button>
  </div>
  
  <button @click="addFind">
    New Find
  </button>
  
  <pre>{{ $data }}</pre>
</div>

Você pode deletar o item através do id

<button @click="deleteEvent(event.id)">Delete</button>

Dentro do seu código JS

deleteEvent(id){
  this.events = this.events.filter((e)=>e.id !== id )
}

O Vue envolve os métodos de mutação de uma matriz observada para que eles também acionem atualizações de visualização. Clique aqui para mais detalhes.

Você pode pensar que isso fará com que o Vue jogue fora o DOM existente e renderize novamente a lista inteira - felizmente, esse não é o caso.

<v-btn color="info" @click="eliminarTarea(item.id)">Eliminar</v-btn>

E para o seu JS:

this.listaTareas = this.listaTareas.filter(i=>i.id != id)

Splice é o melhor para remover elemento de um índice específico. O exemplo fornecido é testado no console.

card = [1, 2, 3, 4];
card.splice(1,1);  // [2]
card   // (3) [1, 3, 4]
splice(startingIndex, totalNumberOfElements)

startupIndex começa em 0.

Por que não omitir o método todos juntos, como:

v-for="(event, index) in events"
...
<button ... @click="$delete(events, index)">