CODEWITHSUNDEEP
javascripthtmlvue.js
Bishwas
Bishwas

Reputation: 203

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

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: enter image description here

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

Upvotes: 0

Views: 2561

Answers (3)

Qiu Zhou
Qiu Zhou

Reputation: 1275

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]);
        }
      }

     }

   }
 }

Upvotes: 1

Thomas Junk
Thomas Junk

Reputation: 5676

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.

Upvotes: 1

Shihara Dilshan
Shihara Dilshan

Reputation: 303

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.

Upvotes: 0

Related Questions