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>
Source:stackexchange.com