Comment ajouter et supprimer un élément de la matrice dans les composants en Vue 2
J'ai fait une composante "ma question" qui contient trois éléments: une liste déroulante (peuplée par des "itemList") et deux zones de saisie remplie à partir de la liste déroulante.
Ce composant est considéré comme une ligne.
Je suis en train d'ajouter et de supprimer une ligne à la fois, mais deux choses je ne suis pas sûr à ce sujet.
(1) ce qu'il faut ajouter les lignes de la matrice?
(2) pourquoi est-ce.les lignes.splice(indice 1) enlever seulement la dernière ligne?
https://jsbin.com/mugunum/edit?html,sortie
Grâce
<div id="app">
<my-item v-for="(row, index) in rows"
:itemdata="itemList"
v-on:remove="removeRow(index)">
</my-item>
<div>
<button @click="addRow"> Add Row </button>
</div>
</div>
<template id="item-template">
<div>
<select v-model="selected">
<option v-for="item in itemdata" :value="item">
{{ item.code }}
</option>
</select>
<input type="text" placeholder="Text" v-model="selected.description">
<input type="text" placeholder="value" v-model="selected.unitprice">
<button v-on:click= "remove"> X </button>
</div>
</template>
Vue.component('my-item', {
props: ['itemdata'],
template: '#item-template',
data: function () {
return {
selected: this.itemdata[0]
}
},
methods: {
remove() {
this.$emit('remove');
}
}
}),
new Vue({
el: "#app",
data: {
rows: [],
itemList: [
{ code: 'Select an Item', description: '', unitprice: ''},
{ code: 'One', description: 'Item A', unitprice: '10'},
{ code: 'Two', description: 'Item B', unitprice: '22'},
{ code: 'Three', description: 'Item C', unitprice: '56'}
]
},
methods: {
addRow(){
this.rows.push(''); //what to push unto the rows array?
},
removeRow(index){
this.rows.splice(index,1); //why is this removing only the last row?
}
}
})
OriginalL'auteur Jeffrey | 2016-12-29
Vous devez vous connecter pour publier un commentaire.
Il y a quelques erreurs que vous faites:
addRow
méthodesplice
méthode pour supprimer un élément d'un tableau à l'indice donné.my-item
composant, où ce qui peut être modifié.Vous pouvez voir le code de travail ici.
Vous n'êtes pas pousser quoi que ce soit dans les rangs, vous devez d'abord fixer l'ajout de lignes correctement, que vous saurez la différence de l'index à supprimer.
C'est le problème. Je ne sais pas comment résoudre addRow
Dois-je pousser la ligne de composants à l'lignes de la matrice? et si oui, comment?
vérifier ceci et édité réponse.
OriginalL'auteur Saurabh
Je pense que vous pouvez utiliser
Array.push()
ajouter des éléments à un tableau.Pour la suppression, il est préférable d'utiliser
this.$delete(array, index)
pour les objets réactifs.https://vuejs.org/v2/api/#Vue-delete
OriginalL'auteur Damien Ó Ceallaigh