Vue.js Form Input Binding with Select option

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stage.

Form Input Binding with Select option is used to handle the value binding for the select element. The select element uses the value as a prop and changes as the event for the v-model directive, which supports the non-string value binding. The initial value of the select option is ignored and always treats the current change as the value. We can make the select option v-model to save different data types other than string-like numbers.

Syntax: For select elements, just add the v-model directive and keep it either single or multiple as follows:

<!-- Single -->
<select v-model="selected">
  <option value="Option 1">Option 1</option>
  ...
</select> 

<!-- Multiple -->
<select v-model="mselected" multiple>
  <option value="Option 1">Option 1</option>
  ...
</select>

<!-- Select Option -->
<select v-model="selected">
  <option :value="{ number:1 }">1</option>
  ...
</select>

Example: In the following example, we have two select elements, one single and one multiple. The single select option store a single value from the select dropdown and the multiple select option stores an array of selected values.

Step 1: Create a new Vue.js project with the npm node.js package manager using the following command.

npm init vue@latest

Enter the project name and preset the project as follows:

Project Structure: After successful installation, the following project structure will be formed.

Project Structure

Step 2: In the App.vue file, add the data members, category, and language for the v-model modifier. Vue.js will store the single select and multiple select values from options in these data members.

App.vue

<script>
export default {
  data() {
    return {
      category: '',
      language: '',
    }
  },
}
</script>

Step 3: In the template section, add two select elements, one with a single select option and the other with multiple select options.

App.vue

<template>
  <center>
    <h1 style="text-align: center;
        color: green">GeeksforGeeks</h1>
    <strong>
        Vue.js Form Input Binding with Select option
    </strong>
    <br />
  </center>
  <center>
    <div>
      Data Structure : {{ category }}
      <br />
      <select v-model="category">
        <option value="Array">Array</option>
        <option value="Queue">Queue</option>
        <option value="Priority Queue">Priority Queue</option>
        <option value="Linked List">Linked List</option>
      </select>
    </div>
    <br />
    <div>
      Programming Language : {{ language }}
      <br />
      <select v-model="language" multiple>
        <option value="Java">Java</option>
        <option value="C++">C++</option>
        <option value="Python">Python</option>
        <option value="Javascript">Javascript</option>
      </select>
    </div>
    <br />
    <div>
      Select the number:
      <select v-model="choose">
        <option :value="{ number: 987 }">987</option>
        <option :value="{ number: 258 }">258</option>
        <option :value="{ number: 456 }">456</option>
      </select>
    </div>
  </center>
</template>

Step 4: Run the project using the following command and see the output.

npm run dev

On successfully building the project, open http://localhost:3000, and the result will be as follows.

Output:

Reference: https://vuejs.org/guide/essentials/forms.html#select-options