Vue.js'de bir diziden bir öğe nasıl kaldırılır

Vue.js (2) 'de yeniyim ve şu anda basit bir etkinlik uygulaması üzerinde çalışıyorum. Olay eklemeyi başardım, ancak şimdi olayları bir düğmeyi tıklayarak silmek istiyorum.

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

});

Olayı işleve geçirmeyi denedim ve bunu dilim işlevi ile silmek yerine, diziden bazı verileri silmek için kullanılan kodun bu olduğunu düşündüm. Bir basitb düğmesi ve onclick olayı ile diziden veri silmenin en temiz yolu nedir?

Kullandığınız spliceyanlış yola.

Aşırı yüklemeler:

dizi.splice (başlangıç)

array.splice (start, deleteCount)

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

Başlangıç, kaldırmak istediğiniz öğe değil, başlatmak istediğiniz dizin anlamına gelir. Ve ikinci parametreyi deleteCount1 olarak iletmelisiniz, bu da "{start} dizininden başlayarak 1 öğeyi silmek istiyorum" anlamına gelir.

Bu yüzden şununla gitsen iyi olur:

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

Ayrıca, bir parametre kullanıyorsunuz, dolayısıyla ona ile değil, doğrudan erişiyorsunuz this.event.

Ancak bu şekilde indexOfher silme işleminde gereksiz yere bakarsınız , bunu çözmek için indexdeğişkeni kendi başınıza tanımlayabilir v-forve ardından olay nesnesi yerine onu iletebilirsiniz.

Yani:

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

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

Ve:

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

Ayrıca. $ Delete kullanabilirsiniz:

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

kaynaklar:

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

Anahtar özelliğini bağlamayı unutmayın, aksi takdirde her zaman son öğe silinir

Seçili öğeyi diziden silmenin doğru yolu:

Şablon

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

senaryo

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

Girişlerle yaptığınızda daha da eğlencelidir, çünkü bağlı olmaları gerekir. Ekleme ve silme seçenekleriyle birlikte Vue2'de nasıl yapılacağını merak ediyorsanız, lütfen bir örneğe bakın:

lütfen bir js fiddle'a bir göz atın

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>

Öğeyi id aracılığıyla silebilirsiniz

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

JS kodunuzun içinde

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

Vue, gözlemlenen bir dizinin mutasyon yöntemlerini sarar, böylece görünüm güncellemelerini de tetikler. Daha fazla ayrıntı için burayı tıklayın .

Bunun Vue'nun mevcut DOM'u atmasına ve tüm listeyi yeniden oluşturmasına neden olacağını düşünebilirsiniz - neyse ki, durum böyle değil.

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

Ve JS'niz için:

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

Splice, belirli bir dizinden öğe çıkarmak için en iyisidir. Verilen örnek konsolda test edilmiştir.

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

beginIndex 0'dan başlar.

Neden yöntemi hep birlikte atlamıyorsunuz:

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