Sélection d'une seule ligne Sélection de toutes les autres lignes dans Vue.js

Question

Je calcule le coût estimé. Sélectionner un produit récupère les détails du produit et affiche sa description et son prix dans la zone de saisie. Et puis en cliquant sur le bouton ajouter une nouvelle ligne apparaîtra pour une autre sélection. Mais le problème est que la nouvelle ligne apparaît avec les anciennes données de ligne. Et changer une seule ligne affecte toutes les autres lignes. Voici mon code jusqu'à présent:

    <tbody v-for="row in rows" :key="index"> 
         <tr> 
          <td> 
         <select @change="selected" v-model="product_id" class="form-control" name="product_id" id="product_id"> 
          <option value="">Select Product</option> 
          <option v-for="item in items" :value="item.id" v-text="item.product_name"></option> 
         </select>           
          </td> 
          <td> 
           <textarea type="text" v-model="product.product_details" name="product_details" id="product_details" class="form-control" rows="1" placeholder="Product Details"> 
           </textarea> 
          </td> 
          <td> 
           <input v-model.number="product.product_sellPrice" type="number" step="any" class="form-control" name="rate" id="rate" placeholder="Rate"> 
          </td> 
          <td> 
           <input v-model.number="product.product_tax" type="number" step="any" class="form-control" name="tax" id="tax" placeholder="Tax"> 
          </td> 
          <td> 
           <input v-model="quantity" type="number" class="form-control" name="quantity" id="quantity" placeholder="Quantity"> 
          </td> 

          <td> 
           <input :value="total" type="number" step="any" class="form-control" name="total" id="total" placeholder="Total Price"> 
          </td> 
          <td> 
           <button class="btn btn-secondary" v-on:click="addrow" > 
            <i class="fa fa-plus" aria-hidden="true"></i> 
           </button> 
           <button v-show="length > 1" class="btn btn-secondary" @click.prevent="removerow(index)"> 
            <i class="fa fa-minus" aria-hidden="true"></i> 
           </button> 
          </td> 
         </tr> 
        </tbody> 


<script> 
    export default{ 
     props: ['products'], 

     data() { 

      return { 
       rows: [{ 

       }], 

       items: this.products, 
       product: '', 
       product_id: '', 
       quantity: '', 
       index: '', 
       total_price: '', 
      } 
     }, 


     methods: { 
      addrow: function (event) { 
       event.preventDefault(); 
       this.rows.push({ 
       }); 
      }, 

      removerow: function (index) { 
       this.rows.splice(index, 1); 
      }, 

      selected(e){ 
       var id = this.product_id; 
       console.log(id); 
       axios.get('/estimate/product/' + id) 
        .then((response)=>{ 
         this.product = ''; 
         this.product = response.data; 
        }) 
        .catch((error) => { 
         console.log(error); 
        }); 
      }, 
     } 
    } 
</script> 

Où est-ce que je fais mal? Comment puis-je le résoudre? Merci.

Answer 1

key doit être un identifiant unique pour chaque ligne. Vous avez index défini dans l'objet data et vous l'utilisez pour toutes les lignes comme clé, ce qui provoque des problèmes.

De même, il n'est pas recommandé d'utiliser l'index de ligne comme clé car il change lorsque vous ajoutez/supprimez des lignes.

Vous avez donc besoin d'ajouter un certain identifiant à chaque élément de ligne et l'utiliser comme la clé, voici un exemple simple de la façon de le faire:

<div id="vue-instance"> 
    <ul> 
    <li v-for="(index,item) in inventory" :key="item.name"> 
     {{ item.name }} - ${{ item.price }} 
     <button @click="add">Add</button> 
     <button @click="remove(index)">Remove</button> 
    </li> 
    </ul> 


</div> 

var vm = new Vue({ 
    el: '#vue-instance', 
    data: { 
    counter: 1, 
    inventory: [{ 
     name: 'MacBook Air', 
     price: 1000 
    }, { 
     name: 'MacBook Pro', 
     price: 1800 
    }, { 
     name: 'Lenovo W530', 
     price: 1400 
    }, { 
     name: 'Acer Aspire One', 
     price: 300 
    }] 
    }, 
    methods: { 
    add: function() { 
     this.inventory.push({ 
     name: 'item' + this.counter++, 
     price: this.counter * 1000 
     }) 
    }, 
    remove: function(index) { 
     this.inventory.splice(index, 1); 
    } 
    } 
}); 

https://jsfiddle.net/1rancd5g/