vue.jsHow do I use the Vue.js select component?

The Vue.js select component is used to create a dropdown list of options that a user can select from. It is a form control that allows the user to choose one or more items from a list of options.

Example

<div id="app">
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selected: '',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})
</script>

This code block will create a dropdown list with three options (One, Two, Three) and the value of the selected option will be stored in the selected variable.

Code explanation

• <select v-model="selected">: This is the main element of the select component. The v-model directive binds the value of the selected option to the selected variable.
• <option v-for="option in options" v-bind:value="option.value">: This is used to loop through the options array and create an option element for each item in the array. The v-bind:value directive is used to bind the value of the option to the value property of the item in the options array.
• {{ option.text }}: This is used to display the text of the option.

Helpful links

• Vue.js Select Component
• Vue.js Directives

Edit this code on GitHub