web-dev-qa-db-fra.com

Comment ajouter et supprimer un élément d'un tableau dans les composants de Vue 2

J'ai créé un composant "my-item" qui contient trois éléments: une liste déroulante (renseignée par "itemList") et deux zones de saisie renseignées dans la liste déroulante . Ce composant est considéré comme une ligne.

J'essaie d'ajouter et de supprimer une ligne à la fois, mais deux choses dont je ne suis pas sûr… ... (1) Que faut-il ajouter au tableau de lignes? (2) , 1) ne supprimant que la dernière ligne?

https://jsbin.com/mugunum/edit?html,output

Merci

<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?
    }
}
})
arraysvue.jsvuejs2
14
Jeffrey

Vous faites quelques erreurs:

  1. Vous devez ajouter le bon objet dans le tableau dans la méthode addRow
  2. Vous pouvez utiliser la méthode splice pour supprimer un élément d'un tableau à un index particulier.
  3. Vous devez passer la ligne actuelle en tant que prop au composant my-item, où cela peut être modifié.

Vous pouvez voir le code de travail ici .

addRow(){
   this.rows.Push({description: '', unitprice: '' , code: ''}); // what to Push unto the rows array?
},
removeRow(index){
   this. itemList.splice(index, 1)
}
13
Saurabh

Je pense que vous pouvez utiliser Array.Push() pour 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.

Vue.delete( target, key ): Supprimer une propriété sur un objet. Si l'objet est réactif, assurez-vous que la suppression déclenche la mise à jour de la vue. Ceci est principalement utilisé pour contourner la limitation selon laquelle Vue ne peut pas détecter les suppressions de propriétés, mais vous devriez rarement en avoir besoin.

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

0
Damien Ó Ceallaigh