[Vuejs]-How do i get the v-model values of a v-for components if i iterate with only numbers?

by

1👍

✅

Try this example.

<div id="app">
  <div>
    <select v-model="jumlahlow">
      <option v-for="i in selects" :key="i">{{ i }}</option>
    </select>
  </div>
  <div v-for="num, index in parseInt(jumlahlow)">
    <input v-model="lows[index].value" />
  </div>
</div>

And JS

new Vue({
  el: '#app',
  data: {
      lows: [
        {
        value: ''
      }
    ],
    jumlahlow: 1,
    selects: [
            1,
        2,
        3,
        4,
        5,
        6
    ]
  },
  watch: {
    jumlahlow: function (val) {
        this.lowsTmp = this.lows;
        this.lows = [];
        for (let i = 0; i < val; i++) {
        const currentVal = typeof this.lowsTmp[i] !== 'undefined' ? this.lowsTmp[i].value : '';
        this.addLow(currentVal);
      }
    }
  },
  methods: {
    addLow: function(val) {
        this.lows.push({ value: val });
    }
  }
})

Directly check here: https://jsfiddle.net/abinhho/m3c8r4tj/2/

👤Binh Ho

2👍

You should try to model your data for how you want the view to be rendered. If you want to have a list of input boxes, then the data for those inputs should be defined in an array that is prepopulated with those items, or when you need to adjust the number of items you should add those data items to the array. You’ll avoid reactivity problems this way too.

Here’s an example of what I mean:

new Vue({
  el: '#app',
  
  data: {
    maxCount: 5,
    count: 3,
    items: [],
    data: '',
  },
  
  computed: {
    visibleItems() {
      return this.items.slice(0, this.count)
    }
  },
  
  created() {
    // Define the data upfront so it will be reactive
    for (let i = 0; i < this.maxCount; i++) {
      this.items.push({
        firstName: '',
        lastName: '',
      })
    }
  },
  
  methods: {
    submit() {
      // Transform the data into some JSON that is
      // compatible with your API
      const data = this.visibleItems.map(item => ({
        first_name: item.firstName,
        last_name: item.lastName,
        role: 'user',
      }))
      
      this.data = JSON.stringify(data, null, '  ')
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    Number of people:
    <select v-model="count">
      <option v-for="i of maxCount" :value="i">{{ i }}</option>
    </select>
  </div>
  
  <div v-for="item of visibleItems">
    <input placeholder="First name" v-model="item.firstName">
    <input placeholder="Last name" v-model="item.lastName">
  </div>
  
  <button @click="submit">Submit</button>
  
  <pre>{{ data }}</pre>
</div>
👤Decade Moon

0👍

you are iterating v-for="n in parseInt(form.jumlahlow)" but that’s an Object and v-for works on array not on objects.

Here you can use array of objects to iterate, for example:- 

form: [{
    jumlahlow: 1,
    checked: [],
    low: []
  }]

and after that you will have to write v-for="n in form" then try accessing low by form.low

👤Anant Vikram Singh

Leave a comment