Добрый вечер. Прошу совета.
Vue3, У меня есть форма.
В форме Select + input.
По клику на кнопку добавляется еще один Select + input.
Можно ли получить из этой формы массив с объектами, вида [{select: значение, input.значение}, {select: значение, input.значение},....]
Или хотя бы натолкните на мысль. Спасибо
<template>
<div class="input ">
<form class="col s12 ">
<div v-for="(line,index) in lines" :key="index" class="item centered">
<div class="row add-todo">
<div class="input-field col s6">
<select ref="select" class="input-container" v-model="">
<option v-if="!allItems.length" disabled selected value="">Not have any items in database</option>
<option v-else disabled selected value="">Choose your option</option>
<option v-for="item in allItems" :key="item.idx" value="item.name">{{ item.name }}</option>
</select>
</div>
<div class="input-field col s6">
<input id="stock" type="text" class="input-container validate" v-model="" required>
<label for="stock">Quantity</label>
</div>
</div>
</div>
</form>
<!-- Buttons -->
<div class="buttons center-align">
<a @click="addLine" class="btn-floating btn-medium waves-effect waves-light red"><i class="material-icons">add</i></a>
<a @click="removeLine(index)" class="btn-floating btn-medium waves-effect waves-light red"><i class="material-icons">remove</i></a>
</div>
<div class="buttons center-align">
<button @click.prevent="addItemToStorage" class="btn">Save to Storage</button>
</div>
<!-- Buttons -->
</div>
</template>
<script>
export default {
name: "TaskInput",
data(){
return{
lines:[],
item: "",
}
},
methods: {
async addLine(){
await this.lines.push("line")
window.M.AutoInit()
},
removeLine(index){
this.lines.splice(index,1)
console.log("remove", index)
},
addItemToStorage(){
console.log()
},
},
mounted(){
window.M.AutoInit()
},
computed: {
allItems(){
return this.$store.getters.GetAllExistItems
}
}
}
</script>
<style scoped>
</style>
