从循环Vue.js中的每个select中获取数据

Question

我有一个产品数组要填充(产品字段：{类型："，名称："}(。有一个变量需要输入产品的数量。然后，对于每个产品，将呈现一个单独的div，其中包含一个选择和一个输入文本。我需要从每个这样的块中获取数据，并将它们放入一个数组中。

<div v-for="n in parseInt(countProd)" :key="n">
<div>
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
<input placeholder="Product name">
</div>
</div>

Answer 1

让我知道这是否有意义。

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>