Retrieve select value with VueJS

Question

Retrieve select value with VueJS

Navigation

#1 by (2 votes)

1

I have a form and would like the field (which is a select) to return (selected) the previously marked value.

Ex: If my selected is empty, select will show the values normally (1, 2, 3, 4). If it has value, my select will show all values, but will come with the value 2 selected already.

<select v-model="item" style="height: 40px;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
 </select>


data(){
   return{
      item: ''
   }
},
mounted(){
   this.api()
},
methods: {
   api(){
      axios.get(url)
      .then(response => {
         this.item = response.data.select  
      }
   }
}

javascript vue.js

asked by anonymous 06.07.2017 / 14:50

1 answer

How to make the Mapper module in EF? Create objects in Runtime faster

score 2 · Accepted Answer

The ideal thing was to have these option to be generated by the template, so it is easy to check if the option to be generated is the one that should be chosen.

Something like this:

<select v-model="item" style="height: 40px;">
    <option 
       v-for"option in options" 
       selected="{{option == item}}"
    >
    {{option}}
    </option>
</select>


data(){
   return{
      item: '',
      options: ['1', '2', '3', '4']
   }
},