0
305
Viewshow get multi options from multi selectbox in vue?
I have many select boxes that have many options and are dynamic.
<template>
<div>
<tr v-for="category in categories.items" :key="category.id">
<td>
<select v-model.trim="$v.form.attributeValues.$model" class="form-control">
<option value=""></option>
<option v-for="option in category.values" :key="option.id" :value="option">
{{ option.content }}
</option>
</select>
</td>
</tr>
</div>
</template>
<script>
export default {
data() {
return {
categories: null,
form: {
productId: this.product.productId,
attributeValues: [],
},
}
},
}
</script>
I want get the values of theme and save it in an array.
But it doesn't work and I can only save 1 option.
like this:
(get just one option from each selectbox)
2 answers
Answer question0
A multi-select is far from being a trivial a trivial component.
Most people simply use vue-multiselect or any package alike.
There is also a ton available only. You should look for the one matching your wanted features.
If you want to implement it manually, you will need to deal with binding the proper inputs, events and structure since it is not achievable with a simple v-model.
One of the best article on this is this one.
Still, it all depends on how you want it to look like, the behavior of the various options, the way to select it (keyboard, ctrl + click, simple click etc...), the transitions etc...
TLDR: use a package or try it yourself and show us what you achieved so far if you want some debugging.
The community will not write a complex component from scratch for you tho.
0
Just put a v-model and a input-event to your option like this:
template
<option v-model="selectedItem" @input="checkItem(selectedItem)">
<!-- Your code -->
</option>
Than go to your script and define everything. After that you can make a method called checkItem and there you will push everything in a defined array which you have selected.
script
data() {
return {
selectedItem: null,
allItems: [],
}
},
methods: {
checkItem(selectedItem) {
this.allItems.push(selectedItem)
}
}
Hopefully this helps you out - pls let me know!