[Vuejs]-Get data from each select in the loop Vue.js

0👍

Let me know if this make sense.

new Vue({
      el: '#app',
      data() {
        return {
          title: "Vue 2 app",
          countProd:0,
          products:[]
        };
      },
      watch:{
        countProd(newVal,old){
          console.log(old,newVal)
          this.products=Array.from({length:newVal},(v,i)=>{
            return { type:'1', name:''}
          })
        }
      }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
No. of Products:
<input v-model="countProd" />
<div v-for="(p,n) in products" :key="n">
        <div>
          <select v-model="products[n].type">
            <option value="1">option1</option>
            <option value="2">option2</option>
            <option value="3">option3</option>
          </select>
          <input placeholder="Product name" v-model="products[n].name">
        </div>
    </div>
    <p v-if="products.length>0">{{products}}</p>
</div>

Leave a comment