选择单行是选择Vue.js中的所有其他行

Question

我正在计算估计成本。选择产品会获取有关产品的详细信息，并在输入框中显示其描述和价格。然后在点击添加按钮后，会出现一个新的行作为另一个选择。但问题在于新行与旧行数据一起出现。并且更改单个行会影响其他所有行。这是我的代码到目前为止：

    <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> 

我在哪里做错了？我该如何解决它？ 谢谢。

Answer 1

key应该是每行的唯一标识符。您在data对象中定义了index，并将其用于所有行作为关键字，这会导致问题。

此外，不建议将行索引用作键，因为它在添加/删除行时发生更改。

所以，你需要一些标识符添加到每个行项目，并以此为重点，这里是如何做到这一点简单的例子：

<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/