How to loop through input type number in vuejs so that I can track value of each iteration?

Question

In my opinion, it's a simple question but couldn't make it work after many efforts. I have an array named as mainList, on every iteration of array, I render input element:

<div class="col-lg-6 col-sm-12 resource-list" v-for="resource in mainList" :key="resource">
       <span>{{ resource }}</span>
       <div class="quantity-box">
           <input
                    type="number"
                    step="1"
                    min="1"
                    :id="resource"
                    :name="resource"
                    v-model="initialValue"
             />
       </div>
</div>

where initialValue=0. The Problem I am facing is, whenever I try to change value of one input box, all gets changed. I want to add all the input field having value greater than initialValue to an array and perform some task with that array. How can I do so ? Thanks in advance.

EDIT: When I replace v-model="initialValue" with :value="initialValue", one input selection doesn't change the value of others but don't know how to save them on an array. This is my data.js file code which I have imported.

export default {
  data() {
    return {
      initialValue: 0,
      mainList: [
        "Analytices & insights",
        "Journey Mangment",
        "Segments & Audience",
        "Personalised experiences",
        "Campaign Orchestration",
        "Customer Acquisition"
     ]
   }
 }
}

Right now this is how it looks:

Expected Output: I want to save those resource name into an array whose value is greater than 0.

please share whole code snippet and sample input and expected output — Arman
– Arman, Commented Sep 3, 2020 at 10:31

Thomas Junk · Accepted Answer · 2020-09-03 11:25:34Z

1

The problem is caused by v-model="initialValue". You are effectively mapping every input field to the same variable.

Changing one input changes the variable and effectively every other input field. One solution would be to omit v-model's two way binding and instead just listen to change on the input element and call a custom method which sets the appropriate value on initialValue. You could keep the inputs and their values in a dictionary / object {$inputname : $value}.

Say you want to display the total amount you could use a computed property for that which iterates over the values of your dictionary and sums them up.

Here is a fiddle which gets you to your desired result.

edited Sep 3, 2020 at 11:25

answered Sep 3, 2020 at 10:32

Thomas Junk

5,6962 gold badges34 silver badges48 bronze badges

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

2 Comments

Bishwas Over a year ago

Hi Thomas. I have one doubt, how can I loop through inputs and just print the name of the resource as right now when I loop, it prints just the number corresponding to that resource.

Bishwas Over a year ago

I got it. resource became the index and the number become value.

Qiu Zhou · Accepted Answer · 2020-09-03 13:02:54Z

Simply to have a values object to bind every input to it's properties:

Here is a working example: Codesandbox

<template>
 <div>
  <div class="col-lg-6 col-sm-12 resource-list" v-for="(resource, index) in mainList" 
     :key="resource">
  <span>{{ resource }}</span>
  <span style="font-size:0">{{values[index] = initialValue}}</span>
  <div class="quantity-box">
     <input
           type="number"
           step="1"
           min="1"
           :id="resource"
           :name="resource"
           v-model="values[index]"
    />
  </div>


</div>
   <br>
   <input  id="button" type="button" value="add greater nums" 
     @click="addGreaterNums()">  

 </div>

 </template>

 <style>
    body { padding: 1rem; }
  </style>

  <script>
   export default {
   data() {
    return {
      mainList: [
      "Analytices & insights",
      "Journey Mangment",
      "Segments & Audience",
      "Personalised experiences",
      "Campaign Orchestration",
      "Customer Acquisition"
      ],
      initialValue: 1,
      values:{}
    }
   }, 
  methods: {

     addGreaterNums: function(){
       for(var key in this.values){
         // get all inputs value greater than initialValue
         if(this.values[key] > this.initialValue){
          console.log(this.values[key]);
        }
      }

     }

   }
 }

Shihara Dilshan · Accepted Answer · 2020-09-03 11:12:59Z

0

I assume that your data is something like this,

data() {
    return {
      mainList:[0,1,2,3,4,5,6],
      initialValue: 0,
    };
  }

the problem with your code is you use v-model with initialValue which now comman state for each itarations.

To fix this, remove initialValue: 0 from current file and just create separate vue file for input field with that state data then render it 'n' times so you can have it's own state rather than sharing a same state for each input.

edited Sep 3, 2020 at 11:12

answered Sep 3, 2020 at 11:04

Shihara Dilshan

3033 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to loop through input type number in vuejs so that I can track value of each iteration?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related