Vue selected first option with v-model

Asked By: Anonymous

I cannot set default value for myselect, when user is at the first time at the site. I want to have first option as selected, but user can change his choice and choose another option if he doesn’t want default option. Can I do this when I use v-model?

Here is my HTML code:

<div class="form-group">
    <label class="control-label" for="docType">Type of document</label>
    <select class="form-control" id='docType' name="docType" v-model="docType"
            :disabled="noDocChoose == true">
        <option value="paragon">Document1</option>
        <option value="complaint">Document2</option>
    </select>
</div>

And here is my Vue JS code:

data: () => ({
    docType: ''
}),

Solution

Answered By: Anonymous

Set your docType in data, to the value you want to be the default.

data(){
  return {
    docType: "paragon"
  }
}

Example.

console.clear()_x000D_
_x000D_
new Vue({_x000D_
  el: ".form-group",_x000D_
  data(){_x000D_
    return {_x000D_
      docType: "paragon"_x000D_
    }_x000D_
  }_x000D_
})

<a href="https://unpkg.com/[email protected]">https://unpkg.com/[email protected]</a>_x000D_
<div class="form-group">_x000D_
  <label class="control-label" for="docType">Type of document</label>_x000D_
  <select class="form-control" id='docType' name="docType" v-model="docType" :disabled="noDocChoose == true">_x000D_
                    <option value="paragon">Document1</option>_x000D_
                    <option value="complaint">Document2</option>_x000D_
                </select>_x000D_
</div>

x000D