Select Box binding in Vue

May 31, 2018

In this example we will see how we can bind the Select Box to Vue

You can have the following Vue instance

var vm= new Vue({
      el: "#root",
      data: {
          days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
          selectedday:''
      },
    })

Here, you will have the days array and selectedday to hold the value selected from the select box

Now your HTML code should look as below

 
Selectd Day is : {{selectedday}}

In this HTML code you can see the v-for directive and v-model="selectedday" which will hold the value selected by you

You can have the working demo here