So entfernen Sie ein Objekt aus einem Array Vue.js

Question

Ich bin neu bei vue.js (2) und arbeite gerade an einer einfachen Event-App. Ich habe es geschafft, Ereignisse hinzuzufügen, aber jetzt möchte ich Ereignisse basierend auf dem Klicken auf eine Schaltfläche löschen.

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 

}); 

Ich habe versucht, das Ereignis an die Funktion zu übergeben und als dass man mit der Slice-Funktion löschen, dachte ich es, dass Code war um einige Daten aus dem Array zu löschen. Was ist der beste und sauberste Weg zum Löschen von Daten aus dem Array mit einer einfachen Schaltfläche und OnClick-Ereignis?

Answer 1

Sie verwenden splice falsch.

Die Überlastungen sind:

Array.splice (Start)

Array.splice (Start, deleteCount)

Array.splice (Start, deleteCount, item1, item2, .. .)

Start bedeutet der Index, den Sie starten möchten, nicht das Element, das Sie entfernen möchten. Und Sie sollten den zweiten Parameter deleteCount mit 1 übergeben, was bedeutet: "Ich möchte 1 Element löschen, das am Index X beginnt".

Sie besser So gehen mit:

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

Auch sind Sie einen Parameter verwenden, so dass Sie Zugriff auf sie direkt, nicht mit this.event.

Aber auf diese Weise Sie die indexOf in jedem löschen unnötig nachschlägt, diese zur Lösung Sie können die index Variable in Ihrem v-for, definieren und es dann an Stelle des Objekts Ereignis übergeben.

Das heißt:

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

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

Und:

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

Answer 2

Es ist noch lustiger, wenn man es mit Eingaben machen, weil sie gebunden werden soll. Wenn Sie interessiert sind, wie es in vue2 zu tun und Optionen mit einfügen und löschen Sie es, bitte, sehen Sie ein 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>