CODEWITHSUNDEEP
javascripthtmlvue.js
kimomat
kimomat

Reputation: 2399

Select option is always preselected in vue.js

I have an strange behaviour with a select field in vue.js.

What i want: a select field with no option selected. In plain html it is no problem. Here is the jsfiddle Link: https://jsfiddle.net/odsf3awr/

  <select id="test" size="5" name="test" >
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>

But the same code in vue.s is preselecting the first option. jsfiddle example: https://jsfiddle.net/q10esdgw/

new Vue({
  el: "#app",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="test" size="5" name="test" >
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>
</div>

A solution could be to add a hidden option like this:

<option hidden disabled selected value>select an option</option>

But i would like to have it clean in vue.js

Upvotes: 1

Views: 224

Answers (1)

Shivashriganesh Mahato
Shivashriganesh Mahato

Reputation: 572

Use Vue's v-model binding so you can specify your preferences in JS:

new Vue({
  el: "#app",
  data: {
    selected: ''
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="test" size="5" name="test" v-model="selected">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>
</div>

Upvotes: 2

Related Questions