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.
- App.vue
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.
- App.vue
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 ).
- App.vue
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.
