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)
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.
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!
Related
I've been rebuilding some of my website and ran into an issue getting my Select to bind correctly to my Options. The list loads just fine, but the selected value does not get loaded. Here's a reduced snippit of the code I'm trying to run.
<template>
<div>
<select v-model="activeItem.id">
<option
v-for="item in items"
:key="item.id"
:item="item"
:value="item.id"
>
{{item.displayData}}
</option>
</select>
</div>
</template>
<script>
computed: {
items(){
return this.$store.state.items;
},
activeItem(){
return this.$store.state.activeItem;
}
}
</script>
I've searched around the web for answers, but haven't seen one specific to this type of setup. I had it working previously, but it was modelled against specific strings rather than ID's. I'm not sure why it changed. All of my data is dynamic so I can't hard code values or anything. Any help would be much appreciated! Thanks!
I had an issue with the data's ids. Nevermind
Is there a way to do a checkbox inside select option vue?
Right now I have the following code:
<select required>
<option v-for=“item in items” :key=“item.id” value=item.id>{{item.name}}</option>
</select>
I need to make it possible to choose several options while selecting. Is there a way to do so?
This won't create checkboxes, but you could create a <select> that allows multiple choices by using the multiple attribute:
new Vue({
el: "#app",
data() {
return {
options: ['Option 1','Option 2','Option 3', 'Option 4'],
selected: []
}
}
});
<div id="app">
Hold down CTRL or SHIFT while selecting.<br>
<select v-model="selected" multiple>
<option v-for="item in options">{{ item }}</option>
</select>
<hr>
Selected: {{ selected }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
If you want a more advanced control that looks nicer and/or uses checkboxes, you can create a custom control or use a library like Vue-multiselect or Vuetify, for example.
I am working on a simple form in VueJs and I do not fully understand why my code is showing in error.
"[Vue warn]: Property or method "theSport" is not defined on the instance but referenced during render"
I have searched around on google and codepen (even modeling my form after those that are working) and I still get the same issue. Could anyone point me in the direction of where I am going wrong?
<template>
<form>
<select name="" id="sportPlayed" v-model="selected">
<option v-bind:value="theSport.sport" v-bind:for="theSport in sportPlayed">{{ theSport.sport }}</option>
</select>
<br>
</form>
</template>
<script>
export default {
name: "FullName",
data:() => {
return {
selected: "Football",
sportPlayed: [
{sport: "Football"},
{sport: "Basketball"},
{sport: "Baseball"},
{sport: "Soocer"}
]
}
}
}
</script>
You need to use v-for="theSport in sportPlayed" instead of v-bind:for="theSport in sportPlayed" to loop through the sportPlayed array.
Check the List Rendering documentation: https://v2.vuejs.org/v2/guide/list.html
v-model on tag doesnt not reflect any changes in the blade template.
I have tried this with an empty html file but its working, but only got the problem in blade template
//blade
<div id="fruit-container">
<select v-model="fruit">
<option disabled value="">Choose a fruit</option>
<option>Apple</option>
<option>Banana</option>
<option>Strawberry</option>
</select>
<span>Fruit chosen: #{{fruit}}</span>
</div>
//js
new Vue({
el:'#fruit-container',
data:{fruit:""}
})
the value #{{fruit}} never show up when i select the different option, and this is only not working in blade i am wondering what did i do wrong here?
I think you need to change your data to this:
data() {
return { fruit: '' }
}
In my application I need to use a nested v-for to display a list of elements with a select-option.. This is the scenario
<div class="stuck" v-for="box in items">
<p>Pick an option for this box:</p>
<select v-model="box">
<option v-for="package in packages"
:value="package.id">{{ package.name }} </option>
</select>
</div>
The variable items come from Vuex store. In this way, i'm getting the error:
You are binding v-model directly to a v-for iteration alias. This will
not be able to modify the v-for source array because writing to the
alias is like modifying a function local variable. Consider using an
array of objects and use v-model on an object property instead.
With this in mind, i'm going to change the code like so:
<div class="stuck" v-for="box in items">
<p>Pick an option for this box:</p>
<select v-model="box.id">
<option v-for="package in packages"
:value="package.id">{{ package.name }} </option>
</select>
</div>
I've just changed the select v-model from the alias box, to the right id: box.id
In this way, all works... or... half works. Because, if i'm going to pick an option from the select, i got another error:
[vuex] Do not mutate vuex store state outside mutation handlers.
This is correct, because the v-model is bind to box.id (that is not an alias but a real value). But, when i pick an option the v-model "try" to change box.id that come from Vuex store.
Now, in a simple scenario i will create a computed property for set/get to avoid vuex store mutation.
But... here i have a nested loop, so i cant create a computed on 'box.id'.
Do you have a solution for this ?
Thanks a lot!
you could try a different data flow pattern.
Your select listens to the store (but does not directly update it)
<div class="stuck" v-for="box in items">
<p>Pick an option for this box:</p>
<select :value="box.id" #change="updateBox">
<option v-for="package in packages" :value="package.id">
{{ package.name }}
</option>
</select>
</div>
Then you create a method that fires whenever the selected option changes
updateBox(e) {
const id = e.target.value;
this.$store.commit('changeYourBox', id);
},
This function should commit a vuex mutation that alteres the box id. So you'd need that mutation too.
Once the store value updates, your components box object updates and the select that listens to that store will update it's selected value accordingly.
That way, you can alter the store value from anywhere and the selected value will change as well.
with usage of mine library vuex-dot in this situation you can do so:
let's go with such state
{
state: {
boxes: []
},
mutations: {
editBox(state, {target, key, value}) {
Vue.set(target, key, value);
}
}
};
So let's create additional component BoxEdit:
<template>
<div class="stuck">
<p>Pick an option for this box:</p>
<select v-model="id">
<option v-for="package in packages"
:value="package.id">{{ package.name }} </option>
</select>
</div>
</template>
<script>
import { take } from 'vuex-dot'
export default {
props: ['box', 'packages'],
computed: {
...take('box')
.expose(['id'])
.commit('editBox', true)
.map()
}
}
</script>
and now you can make simply write
<box-edit v-for="box in boxes" :box="box" :packages="packages"></box-edit>
in your subject component template.
link to library site: https://github.com/yarsky-tgz/vuex-dot