So entfernen Sie ein Element aus der Liste in VUE?

Question

Ich habe den Container, der aus verschiedenen div besteht. Ich möchte bestimmte beim Klicken entfernen. Mein Code (zum Beispiel von Vue-Seite) funktioniert nicht und ich kann nicht verstehen, warum ... Kann es einige Vorschläge geben?

<div class="m-t-15"> 
    <div v-for="(tag, index) in $parent.post.tags" v-on:remove="$parent.post.tags.splice(index, 1)" class="btn-group btn-group-sm m-b-5"> 
     <button type="button" class="btn btn-default" disabled="disabled">@{{ tag.name }}</button> 
     <button type="button" class="btn btn-default" v-on:click="$emit('remove')"> 
      <i class="fa fa-trash"></i> 
     </button> 
    </div> 
</div> 

Answer 1

Sie sollten nicht auf die Daten von Eltern so zugreifen müssen. Muting Eltern Daten sind keine gute Praxis. Übergeben Sie Props einfach und senden Sie das Ereignis zurück an die übergeordnete Komponente.

Child Komponenten emittieren remove Ereignis:

<button @click="$emit('remove', i)">...</button> 

Die Stammkomponente:

<child :list="list" @remove="remove"></child> 

remove (i) { 
    this.list.splice(i, 1) 
} 

Bitte beachten Sie das Arbeitsbeispiel hier: http://codepen.io/CodinCat/pen/PmYNBb?editors=1010