Vue选择了带有v-model的第一个选项 [英] Vue selected first option with v-model

问题描述

当用户第一次在站点上时，我无法为myselect设置默认值.我想选择第一个选项，但是用户可以更改选择，如果不想使用默认选项，则可以选择另一个选项.使用v模型时可以这样做吗?

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?

这是我的HTML代码:

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>

这是我的Vue JS代码:

And here is my Vue JS code:

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

推荐答案

将数据中的docType设置为您想要的默认值.

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

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

示例.

console.clear()

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

<script src="https://unpkg.com/vue@2.4.2"></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>

这篇关于Vue选择了带有v-model的第一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！