Jak usunąć element z tablicy Vue.js

Question

Jestem nowym użytkownikiem vue.js (2) i obecnie pracuję nad prostą aplikacją zdarzeń. Udało mi się dodać wydarzenia, ale teraz chciałbym usunąć zdarzenia na podstawie kliknięcia przycisku.

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 

}); 

Próbowałem przekazać zdarzenie do funkcji, a nie usuwać, że jeden z funkcją slice, myślałem, że to, że kod do usuwania niektórych danych z tablicy. Jaki jest najlepszy i najczystszy sposób usuwania danych z tablicy za pomocą przycisku simpleb i zdarzenia onclick?

Answer 1

Używasz niewłaściwego sposobu używania splice.

przeciwprzeciążeniowe są:

Array.splice (start)

Array.splice (początek, deleteCount)

Array.splice (początek, deleteCount, ITEM1, ITEM2 .. .)

Start oznacza indeks, który chcesz uruchomić, a nie element, który chcesz usunąć. Powinieneś przekazać drugi parametr deleteCount jako 1, co oznacza: "Chcę usunąć 1 element zaczynający się od indeksu X".

Więc lepiej iść z:

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

Również używasz parametru, dzięki czemu dostęp do niego bezpośrednio, a nie z this.event.

Ale w ten sposób można spojrzeć niepotrzebna do indexOf w każdym kasowania, do rozwiązywania tego można zdefiniować zmienną index w swojej v-for, a następnie przekazać go zamiast obiektu zdarzenia.

Czyli:

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

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

I:

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

Answer 2

Jest nawet zabawniej gdy robisz to z wejść, ponieważ powinny one być związany. Jeśli jesteś zainteresowany, jak to zrobić w vue2 i posiadające możliwości wstawiania i usuwania go, proszę spojrzeć js fiddle

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>