Cara menghapus item dari array di Vue.js

Saya baru mengenal vue.js (2) dan saat ini saya sedang mengerjakan aplikasi acara sederhana. Saya telah berhasil menambahkan acara tetapi sekarang saya ingin menghapus acara berdasarkan mengklik sebuah tombol.

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

});

Saya sudah mencoba untuk melewatkan acara ke fungsi dan daripada menghapus yang satu dengan fungsi slice, saya pikir itu kode untuk menghapus beberapa data dari array. Apa cara terbaik dan terbersih untuk menghapus data dari array dengan tombol sederhana dan event onclick?

Anda menggunakan splice dengan cara yang salah.

Kelebihannya adalah:

array.splice (mulai)

array.splice (mulai, deleteCount)

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

Mulai berarti indeks yang ingin Anda mulai, bukan elemen yang ingin Anda hapus. Dan Anda harus meneruskan parameter keduadeleteCount sebagai 1, yang berarti: "Saya ingin menghapus 1 elemen mulai dari indeks {start}".

Jadi sebaiknya Anda menggunakan:

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

Selain itu, Anda menggunakan parameter, jadi Anda mengaksesnya secara langsung, bukan dengan this.event.

Tetapi dengan cara ini Anda akan mencari yang tidak perlu untuk indexOfdi setiap penghapusan, untuk menyelesaikannya Anda dapat menentukan indexvariabel di Anda v-for, dan kemudian meneruskannya sebagai ganti objek acara.

Itu adalah:

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

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

Dan:

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

Anda juga dapat menggunakan. $ Delete:

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

sumber:

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

Jangan lupa untuk mengikat atribut kunci jika tidak selalu item terakhir akan dihapus

Cara yang benar untuk menghapus item yang dipilih dari array:

Template

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

naskah

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

Bahkan lebih lucu ketika Anda melakukannya dengan masukan, karena mereka harus terikat. Jika Anda tertarik dengan cara melakukannya di Vue2 dengan opsi untuk memasukkan dan menghapus, silakan lihat contoh:

tolong lihat biola js

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/vue@2.5.3/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>

Anda dapat menghapus item melalui id

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

Di dalam kode JS Anda

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

Vue membungkus metode mutasi array yang diamati sehingga mereka juga akan memicu pembaruan tampilan. Klik di sini untuk lebih jelasnya.

Anda mungkin berpikir ini akan menyebabkan Vue membuang DOM yang ada dan merender ulang seluruh daftar - untungnya, bukan itu masalahnya.

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

Dan untuk JS Anda:

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

Sambungan adalah yang terbaik untuk menghapus elemen dari indeks tertentu. Contoh yang diberikan diuji di konsol.

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

startingIndex mulai dari 0.

Mengapa tidak menghilangkan semua metode bersama-sama seperti:

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