CODEWITHSUNDEEP
vue.jsvuejs2
user3732216
user3732216

Reputation: 1589

VueJS and Drop down values

Am I grabbing the value of the selection incorrectly in this Vue template form? 

<select class="form-control" v-model="object.property">
        <option selected="selected" value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
      </select>

Upvotes: 0

Views: 691

Answers (1)

thanksd
thanksd

Reputation: 55664

You are binding the value of object.property to the select element correctly.

But, Vue is going to ignore the selected attribute on the first option element.

Here's the warning you will get if you try to use this template:

inline selected attributes on <option> will be ignored when using v-model. Declare initial values in the component's data option instead.

So, if you want the initial value of the select to be the first option, set object.property to that value when you define it in the data method.

Here's an example:

new Vue({
  el: '#app',
  data() {
    return { object: { property: "Option 1" } } 
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <select class="form-control" v-model="object.property">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
  
  {{ object.property }}
</div>

Upvotes: 1

Related Questions