如何在 vuejs 中创建动态 onclick 元素而不重复相同的值

Question

I am trying to create a form in vuejs, where a group of inputs can be append onclick. It works fine, but the problem is, All inputs return the same value. I am sharing an image here :

I am sharing my code from template :

<div class="form-group" v-for="(input,k) in data.invoice_product" :key="k">
    <div class="row mb-2">
         <div class="col-md-3">
              <select class="form-control" v-model="data.invoice_product.product_id" 
               @change="getProductCost">
                  <option v-for="(product, i) in products" :key="i" :value="product.id">{{ 
                  product.product_name }}</option>
               </select>
         </div>
         <div class="col-md-3">
              <input type="text" class="form-control" placeholder="Quantity" v- 
               model="data.invoice_product.quantity" @keyup="getProductCost">
         </div>
         <div class="col-md-3">
              <input type="text" class="form-control" placeholder="Total" v- 
              model="data.invoice_product.total">
         </div>
         <div class="col-md-3">
              <span>
                   <i class="fa fa-minus-circle" @click="removeElement(k)" v-show="k || ( !k 
                   && data.invoice_product.length > 1)">Remove</i>
                   <i class="fa fa-plus-circle" @click="addElement(k)" v-show="k == 
                   data.invoice_product.length-1">Add fields</i>
              </span>
          </div>
     </div>
 </div>

from my script (I am excluding irrelevant code segments) :

export default {
data() {
    return {
        data : {
            customer_id : '',
            vat : ''
        },
        inputs: [{
               product_id : '',
               quantity : '',
               total : ''
        }],
        input: {
               product_id : '',
               quantity : '',
               total : ''
         },
        products : []
    }
},

methods : {
   getProductCost() {
       axios.get('/api/product-cost? 
     product_id='+this.item.product_id+'&&quantity='+this.item.quantity, 
       this.data).then(response => {
           this.input.total = response.data
       })
    },
   addElement() {
       this.data.invoice_product.push({
            product_id : '',
            quantity : '',
            total : ''
       })
    },

    removeElement (index) {
       this.data.invoice_product.splice(index, 1)
    },
}

Input returns null if I use "input" instead :

Answer 1

The problem is not providing correct data to v-model.

Here, you make an iteration, where you get "input" as an element.

<div class="form-group" v-for="(input,k) in data.invoice_product" :key="k">

But here, you are providing "data.invoice_product" instead of "input".

<select class="form-control" v-model="data.invoice_product.product_id" 
           @change="getProductCost">

Just change "data.invoice_product.product_id" to "input.product_id", and also do it for other inputs.

Answer 2

You are already looping through data.invoice_product with this

<div class="form-group" v-for="(input,k) in data.invoice_product"> .... </div>

so the v-model on your select tag should be

<select v-model="input.product_id"> .... </select>

instead of

<select v-model="data.invoice_product.product_id"> .... </select>

Similar case for your input tags for Quantity and Total .

So, the code in your template should be something like this:

<div class="form-group" v-for="(input,k) in data.invoice_product" :key="k">
    <div class="row mb-2">
         <div class="col-md-3">
              <select class="form-control" v-model="input.product_id" 
               @change="getProductCost">
                  <option v-for="(product, i) in products" :key="i" :value="product.id">{{ 
                  product.product_name }}</option>
               </select>
         </div>
         <div class="col-md-3">
              <input type="text" class="form-control" placeholder="Quantity" v- 
               model="input.quantity" @keyup="getProductCost">
         </div>
         <div class="col-md-3">
              <input type="text" class="form-control" placeholder="Total" v- 
              model="input.total">
         </div>
         <div class="col-md-3">
              <span>
                   <i class="fa fa-minus-circle" @click="removeElement(k)" v-show="k || ( !k 
                   && data.invoice_product.length > 1)">Remove</i>
                   <i class="fa fa-plus-circle" @click="addElement(k)" v-show="k == 
                   data.invoice_product.length-1">Add fields</i>
              </span>
          </div>
     </div>
 </div>

[Updated]

Your scripts should be left as it was before:

export default {
data() {
    return {
        data : {
            customer_id : '',
            vat : '',
            invoice_product: [{
               product_id : '',
               quantity : '',
               total : ''
            }],
        },
    
        input: {
               product_id : '',
               quantity : '',
               total : ''
         },
        products : []
    }
},

methods : {
   addElement() {
       this.data.invoice_product.push(this.input)
    },

    removeElement (index) {
       this.data.invoice_product.splice(index, 1)
    },
}