У меня есть массив продуктов для заполнения (поля продукта: {тип: "", имя: ""}). Существует переменная, которая принимает количество продуктов для ввода. Затем для каждого товара рендерится отдельный div с одним select и одним вводным текстом. Мне нужно получить данные из каждого такого блока и поместить их в массив.
<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>
Дайте мне знать, если это имеет смысл.
new Vue({
el: '#app',
data() {
return {
title: "Vue 2 app",
countProd:0,
products:[]
};
},
watch:{
countProd(newVal,old){
console.info(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>
в настоящее время окончательная форма [{type:'1',name:'one'},{...},{...}]
как вы хотите форму?
окончательная форма такая же [{type:'1',name:'one'},{...},{...}], но тип собирается из двух выборок
Может быть нет. предметов. как и какие 2 варианта вы хотите объединить?
Под конкатенацией я имел в виду объединение значений первого и второго выбора. Например, при 1 выборе я выбрал вариант 1, а при втором выборе вариант 4. Затем введите = "опция1" + "опция4". В результате вы должны получить: [{type: 'option1 + option4', name: 'name'}, {...}, {...}]
почему ты так хочешь. скорее иметь 2 выбора для каждого продукта, а 2-й выбор может быть необязательным
сам тип продукта состоит из двух слов, поэтому для точного определения типа нужно 2 выбора
спасибо, но как выбираются значения concat из 2, например: <select v-model = "products[n].type"> <option value = "1">option1</option> <option value = "2">option2< /option> <option value = "3">option3</option> </select> <select v-model = "products[n].type2"> <option value = "4">option4</option> <option value = "5">option5</option> <option value = "6">option6</option> </select> и окончательный тип, например: "option1" + "option4"