CODEWITHSUNDEEP
javascriptselectvue.js
wenus
wenus

Reputation: 1505

Vue selected first option with v-model

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: ''
}),

Upvotes: 0

Views: 5429

Answers (2)

andrunix
andrunix

Reputation: 1754

Are you asking if you can make the select have an empty default value? In that case, you would have to add another option that has a blank value. For example:

    <select class="form-control" id='docType' name="docType" v-model="docType">
      <option value="">- please select -</option>
      <option value="paragon">Document1</option>
      <option value="complaint">Document2</option>
    </select>

The value of the option that matches the docType model would be selected.

Upvotes: 2

Bert
Bert

Reputation: 82439

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

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

Example.

console.clear()

new Vue({
  el: ".form-group",
  data(){
    return {
      docType: "paragon"
    }
  }
})
<script src="https://unpkg.com/[email protected]"></script>
<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>

Upvotes: 1

Related Questions