I'm creating this post because I'm trying to add and remove option in an HTML select from a function.
I've searched everywhere but unfortunately I didn't find anything.
thank you in advance for your help!
methods: {
addElement() {
// function add option in actions select
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="col-md-10 col-md-offset-1">
<select name="actions" v-model="model.actions" class="form-control">
</select>
</div>
</template>
Example from the vue docs https://v2.vuejs.org/v2/guide/forms.html#Select (find using v-for with select at that page):
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
If you want to add option to select just create some method addOption(option):
methods:{
addOption(option){
this.options.push(option);
}
}
Related
In Vuejs, how can i get :key value which stores value from v-for loop in a dropdown. I am trying to get id of dropdown along with the name. I can get name using #change>event.target.value but is there any possibility to get key value?
Thanks
<select #change="checkFirst($event)" v-model="firstDropdownValue">
<option value="none" selected="selected"> Select one...</option>
<option
v-for="data in getCategoriesDetail"
:key="data.id" :
:value="data.name">{{data.name}}</option>
</select>
As per my understanding, You want to get the value of :key which is data.id of the selected option from the dropdown. If Yes, You can use v-model to get the whole object instead of just name and then you can filtered out the properties you want in the script.
Demo :
new Vue({
el: '#app',
data: {
getCategoriesDetail: [{
id: 1,
name: 'Option 1'
}, {
id: 2,
name: 'Option 2'
}, {
id: 3,
name: 'Option 3'
}, {
id: 4,
name: 'Option 4'
}],
firstDropdownValue: 'none'
},
methods: {
checkFirst() {
console.log('id : ' + this.firstDropdownValue.id)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select #change="checkFirst" v-model="firstDropdownValue">
<option value="none">Select one...</option>
<option
v-for="item in getCategoriesDetail"
:key="item.id"
:value="item">{{ item.name }}</option>
</select>
</div>
You can simply use the v-model you use in your select !
And you should use the entire object in the :value instead of just the name :value="data" and then use it in the template as firstDropdownValue.name
new Vue({
el: "#app",
data: () => ({
firstDropdownValue: null,
getCategoriesDetail: [
{id:1, name: "foo"},
{id:2, name: "bar"},
{id:3, name: "baz"},
]
}),
methods: {
checkFirst(){
console.log(this.firstDropdownValue)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select #change="checkFirst" v-model="firstDropdownValue">
<option value="none" selected="selected"> Select one...</option>
<option
v-for="data in getCategoriesDetail"
:key="data.id"
:value="data"
>{{data.name}}</option>
</select>
Selected value : {{firstDropdownValue && firstDropdownValue.name}}
</div>
I am currently developing frontend with Argon for vue.js.
Free Argon template doesn't support type select for base-input so I decided to make it myself.
Here is my code:
<template>
// ...
<base-input alternative
type="select"
:options="genders"
addon-left-icon="ni ni-circle-08">
</base-input>
// ...
</template>
<script>
export default {
name: 'app-footer',
data() {
return {
genders: [
{ value: 0, text: 'Select Gender' },
{ value: 1, text: 'Male' },
{ value: 2, text: 'Female' }
]
}
}
}
</script>
BaseInput.vue:
<template>
// ...
<slot v-bind="slotData">
<select v-if="$attrs.type==='select'"
:value="value"
v-on="listeners"
v-bind="$attrs"
class="form-control"
:class="[{'is-valid': valid === true}, {'is-invalid': valid === false}, inputClasses]"
aria-describedby="addon-right addon-left">
<option v-for="(option, index) in $attrs.options"
:key="index"
v-bind:value="option.value">
{{$t(option.text)}}
</option>
</select>
<input
v-else
:value="value"
v-on="listeners"
v-bind="$attrs"
class="form-control"
:class="[{'is-valid': valid === true}, {'is-invalid': valid === false}, inputClasses]"
aria-describedby="addon-right addon-left">
</slot>
// ...
</template>
However, it only renders following html:
<select aria-describedby="addon-right addon-left" type="select" class="form-control"></select>
What is the problem here?
I found a solution. I used options for props. In vue.js options is a reserved keyword. I replaced it with optionlist and it works perfectly.
I get some data from the my api.I use axios for this and everything works fine.
Actually I get array of objects and I want to render them in select tag, but it doesn't render because component mounted before I get some data from api, so it looks like it is not reactive.
<select v-model="book.cityId">
<option value="" disabled selected>Select city</option>
<option v-for = "city in dataToUse.cities" :key = "city.id" :value="city.id">
{{city.name}}
</option>
</select>
I tried to use v-if = "dataToUse.cities.length" and see if this array have any items, but in this case select not rendered at all. Can someone help me?
Look this example:
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
In this case you have to replace the "options" by your response of your API
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
Reference: https://v2.vuejs.org/v2/guide/forms.html#Select
I have a component involving a select element. Below, opts is an array of objects.
Vue.component('atcf-select', {
props: [
'opts',
],
data() {
return {
element_index: '',
};
},
template: `
<div>
<select #change="onChange(opt,index)">
<option v-for="(opt,index) in opts">
{{ opt.text }} {{opt.index}}
</option>
</select>
</div>
`,
methods: {
onChange(opt,index) {
//Do something with opt and index...
}
}
};
The problem is obviously I cannot get the selected opt object and its index, and use it as a parameter for onChange method. What is the correct way to get the selected option's index and object?
You won't be able to pass the opt or index values to the change listener on the select element because it is outside the scope of the v-for.
If you don't specify any parameters for the onChange handler, Vue will implicitly pass an event object. From there, you can get the selectedIndex value via e.target.selectedIndex.
Here's an example:
new Vue({
el: '#app',
data() {
return {
opts: [
{ value: 'a', text: 'A' },
{ value: 'b', text: 'B' },
{ value: 'c', text: 'C' },
]
}
},
methods: {
onChange(e) {
let index = e.target.selectedIndex;
let option = this.opts[index];
console.log(index, option);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="app">
<select #change="onChange">
<option v-for="(opt, index) in opts" :key="index" :value="opt.value">
{{ opt.text }}
</option>
</select>
</div>
You can use v-model
{{ option.value }} - {{ option.text }}
Index of {{valeureSelectionnee}} is : {{ IndexValeureSelectionnee }}
In Vue we can bind data on two way in the select component like below:
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
Our Vue code is:
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
Here v-model property works for the value of the option.
Is there any method for the same thing to the text property of the option.
In other words, is there any method works with One,Two and Three values.