Vue la première option sélectionnée avec v-modèle

Question

Je ne peux pas définir valute deafult pour select, quand l'utilisateur est à la première fois sur le site. Je veux avoir la première option sélectionnée, mais l'utilisateur peut changer son choix et choisir une autre option s'il ne veut pas l'option par défaut. Est-ce que je peux faire ceci quand j'utilise le v-model? Voici mon 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> 

Et voici mon Vue:

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

Answer 1

Définissez vos docType dans les données, à la valeur que vous voulez être la valeur par défaut.

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

Exemple.

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

Demandez-vous si vous pouvez faire la sélection ont une valeur par défaut vide? Dans ce cas, vous devrez ajouter une autre option qui a une valeur vide. Par exemple:

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

La valeur de l'option correspondant au modèle docType est sélectionnée.