Select different values on two select tags in Vue.js
Last Updated :
03 Feb, 2023
In this article, we will see the selection of different values on a single select and two <select> tags in vue.js, along with understanding their basic implementation through the examples.
HTML <select> tag is used to create a drop-down list. Adding a list of options inside the drop-down list using the <option> tag. when we select any values from the list of options it will update the same in the DOM.
Vue is an open-source front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many in-built directives for DOM manipulation such as v-bind, v-on, v-model, etc. The following Vue.js directives are used in this article.
- v-model: This directive is used to create two-way data bindings on form input, textarea, etc.
- v-bind: This directive is used to manipulate HTML attributes, change the style, and assign classes with help of binding.
- v-if: This directive is used for conditional rendering.
- v-on: This directive is used to handle the events in DOM elements.
In Vue.js, we can select values dynamically from the Vue component data model. For a list of options no need to write more html <option> tags for different values, instead, use the v-for directive to bind different values from an array of objects. Show the list of options and selected values using a two-way data binding model with double curly braces.
Selecting a single value in Vue.js:
Approach 1: Usually Single select/dropdown element doesn’t require many attributes, and a list of options must be an array of objects. If we need to disable a few options, then add this attribute “selected disabled” inside the <option> element.
Syntax:
<select v-model="selectedValue">
<option value="" selected disabled>
Choose
</option>
</select>
Add a list of options on another <option> element with a bound array of objects using the v-for directive. Selecting any value in the drop-down list, it will render automatically in the DOM using the v-model directive(two-way data binding ).
<select v-model="selectedValue">
<option value="" selected disabled>
Choose
</option>
<option v-for="item in options">
{{item}}
</option>
</select>
<script>
const firstApp = new Vue({
el:'#firstApp',
data: {
selectedValue: '',
options: [
/* add options list here */
]
}
});
</script>
Example 1: This example describes the basic implementation for Selecting the different values on two <select> tags in Vuejs.
HTML
< template >
< h1 v-bind:style = "{ color:'green'}" >
Dynamic Rendering of selecting options
</ h1 >
< h3 >
Select any Fruit
< select v-model = "selected" >
< option value = "" selected disabled>
Choose
</ option >
< option v-for = "item in options" >
{{ item }}
</ option >
</ select >
< span v-bind:style = "{ color:'green'}" >
Selected Fruit : {{ selected }}
</ span >
</ h3 >
</ template >
< script >
export default {
name: "App",
data() {
return {
selected: '',
options: ['Apple', 'Banana', 'Cherry', 'Dates']
};
},
};
</ script >
|
Output: The above example shows that choosing any value from the drop-down list, it will render the same in DOM. Now, we will see how to render the different values for options from the drop-down list.
Approach 2: In <select> element, add a list of options on <option> element with bind array of objects using v-for directive and bind the respective values using v-bind:value directive. Selecting any option in the drop-down list will render the value based on the option automatically in the DOM using the v-model directive(two-way data binding ).
Syntax:
<select v-model="selectedValue">
<option value="" selected disabled>
Choose
</option>
<option v-for="item in options"
v-bind:value="item.val">
{{ item.opt }}
</option>
</select>
Here, both item.val and item.opt attributes initialized as an array of objects by Vue Components inside data { } block. An array of objects must be in JSON format for different values that need to bind with a list of options.
<script>
const firstApp = new Vue({
el:'#firstApp',
data: {
selectedValue: '',
options: [
/* add JSON objects of options and values {opt:' ',val:' '} */
]
}
});
</script>
Example 2: In the below example, we are giving a list of words with respective antonyms ( opposite word ) in the drop-down list. Whenever we click any option in the drop-down list, it will render the respective opposite value on the DOM.
HTML
< template >
< h1 v-bind:style = "{ color:'green'}" >
Dynamic Rendering of selecting options
</ h1 >
< h3 >
Select any word
< select v-model = "selected" >
< option value = "" selected disabled>
Choose
</ option >
< option v-for = "item in options"
v-bind:value = "item.ans" >
{{ item.word }}
</ option >
</ select >
< span v-bind:style = "{ color:'green'}" >
Antonym of selected word : {{ selected }}
</ span >
</ h3 >
</ template >
< script >
export default {
name: "App",
data() {
return {
selected: '',
options: [
{ word: 'Artificial', ans: 'Natural' },
{ word: 'Argue', ans: 'Agree' },
{ word: 'Alive', ans: 'Dead' },
{ word: 'Build', ans: 'Destroy' },
{ word: 'Buy', ans: 'Sell' },
{ word: 'Bottom', ans: 'Top' },
{ word: 'Bitter', ans: 'Sweet' }
]
};
},
};
</ script >
|
Output:
Selecting multiple/different values in Vue.js: Selecting different values requires an attribute “multiple” inside the <select> element. The “multiple” attribute is used to select multiple values. Hold the control key on the keyboard and select the different/multiple values from the drop-down list. Add a list of options on another <option> element with a bound array of objects using v-for and v-bind directives. selecting multiple/different values in the drop-down list, it will render automatically using the v-model directive(two-way data binding ).
Syntax:
<select v-model="multipleSelected" multiple>
<option v-for="item in options"
v-bind:value="item.text">
{{ item.head }}
</option>
</select>
Example 3: In the below example, we have two drop-down lists. Whenever we click any value in the first drop-down list, it will render the single value on {{selected}} expression in DOM. Now click different values in the second drop-down list, it will render the multiple values on {{multipleSelected}} expression in DOM. Selecting multiple values requires list initialization for rendering different values. Additionally adding a method for clearing the drop-down list when the reset button is clicked. ( v-on directive used for handling the events of a Button click ).
HTML
< template >
< h1 >
Selecting Single Topics
</ h1 >
< select v-model = "selected" >
< option value = "" selected disabled>
Choose
</ option >
< option v-for = "item in options"
v-bind:value = "item.text" >
{{ item.head }}
</ option >
</ select >
< h3 v-bind:style = "{ color:'green'}" >
{{ selected }}
</ h3 >
< h1 >Selecting Multiple Topics</ h1 >
< h4 >
Hold the control key on keyboard
for selecting different values
</ h4 >
< select v-model = "multipleSelected" multiple>
< option v-for = "item in options"
v-bind:value = "item.text" >
{{ item.head }}
</ option >
</ select >
< h4 v-if = "multipleSelected.length != 0"
v-bind:style = "{ color:'green'}" >
{{ multipleSelected }}
</ h4 >
< p >Click here for clearing drop-down list </ p >
< button v-on:click = "clearData" >
Reset
</ button >
</ template >
< script >
export default {
name: "App",
data() {
return {
selected: '',
// for selecting multiple values requires list
// initialization for rendering different values
multipleSelected: [],
options: [
{ head: 'HTML',
text:
'HTML is the standard markup language for Web pages' },
{ head: 'DOM',
text:
'The Document Object Model (DOM) is a programming interface for web documents' },
{ head: 'JavaScript',
text:
'JavaScript is a lightweight, interpreted, or just-in-time compiled programming language ' }
]
};
},
// a method that clear the data model fields using
// button event click
methods: {
clearData: function () {
this.selected = ''
this.multipleSelected = []
}
},
};
</ script >
|
Output:
Note: Hold the control key on the keyboard and select the different/multiple values from the drop-down list. This is applicable for multiple attributes used in <select> element of the drop-down list.
Share your thoughts in the comments
Please Login to comment...