VueJS supprimer un élément des listes?
il est possible de supprimer un élément spécifique des listes. j'ai essayé cette fonction pour supprimer l'élément
pop() = supprimer le dernier élément
$remove(index) = ne pas supprimer n'importe quel élément à partir de listes
remove (index ) = undefined function
unshift( index ) = ajouter de nouveaux et d'élément vide
splice( index ) = supprimer tout élément à partir de l'index
merci de m'aider à supprimer un élément à partir de listes.
ci-dessous est mon code js
var example2 = new Vue({
el: '#example-2',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' },
{ message: 'Bar1' },
{ message: 'Bar2' },
{ message: 'Bar3' },
{ message: 'Bar4' }
]
},
methods : {
removeElement : function(index){
this.items.$remove(index);
}
}
})
ci-dessous est mon code HTML
<ul id="example-1">
<li v-for="(key, item) in items">
{{ item.message }}
<button v-on:click="removeElement(key)">remove</button>
</li>
</ul>
5 réponses
$remove est déprécié en Vue.js 2.0 et remplacé par splice pour que cela fonctionne.
methods: {
removeElement: function (index) {
this.items.splice(index, 1);
}
}
Vous pouvez utiliser Vue.supprimer si votre version Vue est 2.2.0+
Vue.delete(this.items, index);
$.remove fonctionnalité a été remplacée par $.delete.
Vous pouvez l'appeler comme ceci:
this.$delete(this.someItems, itemIndex).
Il fonctionne sur Object ainsi que Array. Avec des objets, vous devez utiliser un objet incrusté. Avec les tableaux, vous pouvez passer l'index de l'élément que vous souhaitez supprimer.
voici un exemple de violon:https://jsfiddle.net/james2doyle/386w72nn/
EDIT
j'ai ajouté un exemple pour un tableau ainsi
$supprimer pouvez utiliser inline dans @clic:
<ul id="example">
<li v-for="(item, key) in items">
{{ item.message }}
<button @click="$delete(items, key)">remove</button>
</li>
</ul>
tout d'Abord, vous devez corriger l' methods clé.
ensuite, vous devez passer l'article à la $remove méthode, pas le index. [ref]