How to create dynamic onclick elements in vuejs without repeating same value

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 :

because you get/set the same data from data.invoice_product. get/set the input instead. — linhx
– linhx, Commented May 30, 2022 at 4:52
input also has issue, if I use input, then it does not catch any data. I have updated my question, please check the image at the bottom — K..S.Azim
– K..S.Azim, Commented May 30, 2022 at 5:24

Azamat · Accepted Answer · 2022-05-30 05:24:44Z

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.

answered May 30, 2022 at 5:24

Azamat

3611 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

K..S.Azim Over a year ago

input also has issue, if I use input, then it does not catch any data. I have updated my question, please check the data(){} segment and the image at the bottom

Azamat Over a year ago

@K..S.Azim, now, you are mixing "input" which is in data() and "input" which is element of iterable object. Use v-for="(item,k) in data.invoice_product", and change relevant rows.

K..S.Azim Over a year ago

I am having another issue, I need these data in input (in data())

symplytheo · Accepted Answer · 2022-05-30 05:40:59Z

1

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)
    },
}

edited May 30, 2022 at 5:40

answered May 30, 2022 at 5:30

symplytheo

1,8811 gold badge7 silver badges4 bronze badges

6 Comments

K..S.Azim Over a year ago

input also has issue, if I use input, it does not catch any data. I have updated my question, please check the data(){} segment and the image at the bottom

symplytheo Over a year ago

There was no need to change your script.

K..S.Azim Over a year ago

The issue still persists, I need these data (in input) to be passed in a post method

symplytheo Over a year ago

Are the input fields still showing the same value for all? As for the post method, we'd have to see what you're supposed to send to the API and how you are sending it.

K..S.Azim Over a year ago

Please check the question, I have updated the question including the method getProductCost(), it's a get method actually, sorry for the misinformation

|

Collectives™ on Stack Overflow

How to create dynamic onclick elements in vuejs without repeating same value

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related