Pulsante per eliminare un elemento dell'array in Vue

Creiamo un pulsante per l'eliminazione reattiva degli elementi da un elenco. Iniziamo con l'implementazione. Supponiamo di avere un array:

App.vuedata() {
  return {
    items: ['a', 'b', 'c', 'd', 'e'],
  }
}

Visualizziamo il contenuto dell'array sotto forma di elenco:

App.vue<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

Creiamo in ogni elemento dell'elenco un pulsante per l'eliminazione. In questo pulsante colleghiamo un metodo, al quale passeremo come parametro l'indice dell'elemento dell'array che intendiamo eliminare:

App.vue<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
      <button @click="removeItem(index)">remove</button>
    </li>
  </ul>
</template>

Implementiamo l'eliminazione nel metodo removeItem:

App.vuemethods: {
  removeItem: function(index) {
    this.items.splice(index, 1);
  }
}