Select different values on two select tags in Vue.js

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

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

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

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.