Selecting a single row is Selecting all other rows in Vue.js

Question

I am calculating estimated cost. Selecting a product fetch the details about the product and showing it's description and price on the input box. And then upon clicking in add button a new row will appear for another selection. But the problem is the new row appears with the older row data. And changing a single row affects all other rows. Here is my code so far:

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

Vue Part

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

Where am I doing wrong?

Answer 1

key should be a unique identifier for each row. You have index defined in the data object and you use it for all the rows as key, that causes problems.

Also it is not recommended to use the row index as a key since it changes when you add/remove rows.

So you need to add some identifier to each row item and use it as the key, here is a simple example of how to do it:

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