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.
Related
I'm new to Vue and am trying to build a form with a datalists. The code I've written seems to work fine but I'm not sure why the dropdown list will appear twice. Once when nothing is typed into the input where it will show all the options available, and the second time when an option is chosen and the dropdown will show only the options that match the one typed. Is there a way to get rid of the second dropdown, where it will only show the dropdown once?
Template
<input list=list1 v-model="test">
<datalist id=list1>
<option v-for "item in items" :value="item" :key="item"></option>
</datalist>
Script
export defaults{
data(){
items: [1,2,3,4,5],
test: ''
}
}
Try using {{ item }} instead of binding :value to show and populate the value.
<div>
<input type="text" list="list1" v-model="test" #change="onChange()" />
<datalist id="list1">
<!-- use normal {{ item }} here without binding value-->
<option v-for="item in items" :key="item">{{ item }}</option>
</datalist>
</div>
How can I add an input box into a select element, with Vue?
Let's say I've got a list like ['Red', 'Yellow', 'Green'], and the user wants to choose 'Black' which not in the list.
I want the user to be able to type it, within the select element, get it added to the list, and be selected.
Here is my code so far:
<template>
<div >
<div class="form-group col-md-2">
<label >Colors</label>
<select v-model="selected" class="form-control" >
<option v-for="option in list" class="form-control" :key="option">
{{ option}}
</option>
</select>
</div>
<p>The selected color is: {{selected}}</p>
</div>
</template>
<script>
export default {
data(){
return{
list:['Red', 'Yellow', 'Green'],
selected: '',
};
},
}
</script>
You can use vue-multiselect for the searchable dropdown:
<multiselect
:options="list"
v-model="selected"
></multiselect>
...and add some custom code to add the typed color to list when Enter or Return is pressed:
<div #keyup.enter="addColor($event)">
<multiselect
:options="list"
v-model="selected"
#search-change="typed = $event"
></multiselect>
</div>
addColor() {
if (!this.list.includes(this.typed)) this.list.push(this.typed); // check if inputted color is already in the list; if not, add it; if so, don't
this.selected = this.typed; // set `selected` to the currently typed color
},
Note that you will have to add the CSS for vue-multiselect, which you can see how to do in the installation instructions here.
Sandbox & Full Code
I'm new with vue.js, and trying to find the best way to get a value from <option> of <select> element, and store it to data() property, so it can be passed to another component.
That <select> section looks like this:
<select ref="select">
<!-- key "item" == js object in array, fetched from API -->
<option
v-for="(item, index) in arr"
v-bind:key="index"
:value="item">{{item.val}}</option>
</select>
So, what's the best way to get item.val and put it into data() ?
Thanks in advance.
new Vue({
template:'
<select v-model="selectedOption" #change="handleChange">
<option value="" disabled>--Select--</option>
<option v-for="item in data" :value="item.val">{{item.text}}</option>
</select>
',
data:{
selectedOption:''
},
methods:{
handleChange:function(event){
console.log(this.selectedOption); //you will find the value here
}
}
})
The vue template:
<select v-model="selectVal" ref="select">
<option
v-for="(item, index) in arr"
v-bind:key="index"
:value="item">{{item.val}}</option>
</select>
The js code:
data: function(){
return {
selectVal: 0,
};
},
There is a project on vue.js to which the i18n library is connected.I have a drop-down list that switches languages
<template>
<div class="locale-changer">
<select v-model="$i18n.locale">
<option
v-for="(lang, i) in langs"
:key="`Lang${i}`"
:value="lang"
>{{ lang }}
</option>
</select>
</div>
</template>
<script>
export default {
name: 'VeLanguageSwitcher',
data () {
return { langs: ['en-US', 'ru-RU'] }
}
}
</script>
I need to make it beautiful by example
Help me please!!!
I want to initialize one variable with another variable in Vue js
Here I want to initialize 'multiple' variable with 'select' variable
<div id="myapp">
<select v-model="select">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected {{select}}</span>
<hr>
<select v-model="multiple" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Multiple Selected :{{ multiple | JSON}}</span>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script>
var vm=new Vue({
el:'#myapp',
data:{
select:'B',
multiple:select
}
})
</script>`
Here I get an error like:
Uncaught ReferenceError: select is not defined
You can't access data properties like this in the data() method.
If you want to do this (though it seems a bit useless in this example), you will have to define a variable outside, and then reference it in data()
<script>
var select = 'B'
var vm=new Vue({
el:'#myapp',
data:{
select: select,
multiple:select
}
})
</script>`