[Vuejs]-How to get select option in Vue.js

by

0👍

✅

There are a couple immediate ways.

First, you can take the selected item from the select element by simple adding a method and taking the option natively.

Create a method submitFunc in your component’s method options, in that method, query the select element.

new Vue({
//...
  methods: {
     submitFunc: function(){
          let select = this.$el.querySelector('#mySelect'); //add an id for ease
          let selectedOption = select.options[select.selectedIndex];

          console.log(selectedOption); //will output the element, you can get the value at this point.
          //do something else
     }

  } 
})

Secondly, thanks to @Kokodoko, you can use the Vue’s two-way data binding by declaring a selectedItem property in the data options, attaching it in the v-model attribute of the select element, and then accessing it via submitFunc method.

new Vue({
    el: '#app',
    data: {
        classes: [],
        selectedItem: null //this will be your selected option
    },
    methods:{
        submitFunc: function(){
            const selectedItem = this.selectedItem;

            //do something with selectedItem
        }
    }
});

In the template

<select v-model="selectedItem">
   <option></option>
   <option v-for="fruit in class.fruit">{{fruit}}</option>
</select>

<button v-on:click="submitFunc">Submit</button>

Leave a comment