V-modelで最初に選択したオプションを選択してください。

Question

ユーザーがサイトに初めて参加したときに、selectにdeafult valuteを設定できません。最初のオプションを選択したいと思っていますが、デフォルトオプションが必要ない場合、ユーザーは選択肢を変更して別のオプションを選択できます。 v-modelを使用しているときにこれを行うことはできますか？ここ

<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である：あなたのdocType内のデータを設定し

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

Answer 1

は、あなたがデフォルトになりたい値に は、ここに私のコードです。

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>

Answer 2

あなたが選択が空のデフォルト値を持たせることができれば、あなたが求めていますか？その場合は、空白の値を持つ別のオプションを追加する必要があります。例：

<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> 

docTypeモデルと一致するオプションの値が選択されます。