VUEJS rimuove l'elemento dagli elenchi?

Question

è possibile rimuovere elementi specifici dalle liste. Ho provato questo funzioni per l'elemento rimuovi

pop() = rimuovere l'ultimo elemento

$ rimuovere (indice) = Non rimuovere alcun elemento da liste

remove (indice) = undefined function

unshift (indice) = aggiungere nuovo e vuoto elemento

splice (indice) = rimuovere tutti gli elementi dall'indice

per favore aiutami a rimuovere elementi specifici dalle liste.

sotto è il mio codice js

var example2 = new Vue({ 
    el: '#example-2', 
    data: { 
    items: [ 
     { message: 'Foo' }, 
     { message: 'Bar' }, 
     { message: 'Bar1' }, 
     { message: 'Bar2' }, 
     { message: 'Bar3' }, 
     { message: 'Bar4' } 
    ] 
    }, 
    method : { 
    removeElement : function(index){ 
     this.items.$remove(index); 
    } 
    } 
}) 

sotto è il mio codice HTML

<ul id="example-1"> 
    <li v-for="(key, item) in items"> 
    {{ item.message }} 
    <button v-on:click="removeElement(key)">remove</button> 
    </li> 
</ul> 

Answer 1

$remove è deprecato in Vue.js 2.0 e sostituito dal splice come indicato nella documentazione. Assicurati di aggiungere il 2 ° parametro di splice affinché funzioni.

Migration From Vue 1.x - 2.0

methods: { 
    removeElement: function (index) { 
    this.items.splice(index, 1); 
    } 
} 

Answer 2

In primo luogo, si dovrebbe risolvere la chiave methods.

Quindi, è necessario passare l'articolo al metodo $remove, non allo index. [ref]

https://jsfiddle.net/790og9w6/

Answer 3

È possibile utilizzare Vue.delete se la versione Vue è 2.2.0+

Vue.delete(this.items, index); 

Answer 4

La caratteristica $.remove è stato sostituito con $.delete.

Si può chiamare in questo modo:

this.$delete(this.someItems, itemIndex).

Funziona su Object e su Array. Con gli oggetti, è necessario utilizzare un oggetto con chiave. Con gli array, si passa all'indice dell'elemento che si desidera eliminare.

Ecco un esempio di violino: https://jsfiddle.net/james2doyle/386w72nn/

EDIT

Ho aggiunto un esempio per una matrice così

Answer 5

$ cancellare può usare inline in @Fare clic:

<ul id="example"> 
    <li v-for="(item, key) in items"> 
     {{ item.message }} 
     <button @click="$delete(items, key)">remove</button> 
    </li> 
</ul> 

https://vuejs.org/v2/api/#vm-delete