Weisen Sie dynamisch generierten Auswahlelementen in vuejs einen voreingestellten Wert zu

Question

Ich habe mehrere select Elemente in einer Seite dynamisch erzeugt. Und ich habe

v-model = "selected_option" 

verwendet, um den Wert der Option zu erhalten. Alle Auswahlelemente auf der Seite haben jedoch unterschiedliche Optionswerte und keines der Auswahlelemente hat einen gemeinsamen Standardoptionswert. Alle Auswahlelemente müssen das erste Optionselement als den standardmäßig ausgewählten Wert haben. Aber wenn ich schreibe

selected_option = '' 

dann alle Auswahlelemente werden standardmäßig leer angezeigt. Ich bin nicht in der Lage zu sein, um den ausgewählten Wert in der @change Methode zu erhalten Ich kann die erste Option Wert als der gewählten Standardwert, wenn ich

v-model = "selected_option" 

und

selected_option = '' 

entfernen, aber dann . Hier ist mein Code

<div v-if="row.answer_input_type === 'Dropdown'"> 
    <template v-for="answer in answers"> 
    <template v-if="answer.AnswerTypeID === row.answer_type_id"> 
     <select class="dropdown_cl" v-bind:disabled="row.is_enabled == 1 ? false : true" @change="selectChange(row.question_id)" v-model="selected_option"> 
     <option v-for="option in answer.AnswerDescription" v-bind:value="option.AnswerMasterID" >{{option.AnswerDescription}}</option> 
     </select> 
     <p v-for="option in answer.AnswerDescription">{{option.AnswerMasterID}}</p> 
    </template> 
    </template> 
</div> 

der Standardwert zugewiesen wurde wie folgt -

el : '...' 
data : { 
     ... 
     selected_option: ''; 
     }, 
methods: { 
      selectChange: function(question_id) { 
          var self=this; 
          alert(question_id + " " + self.selected_option); 
         }, 
      ... 
     }, 
.... 

Ich brauche jeweils die erste Option als Standard ausgewählt Wert haben wählen. Wie kann ich das machen? Danke

Answer 1

Hier ist ein kurzes Beispiel dessen, was ich in Kommentaren erklärt habe.

<select v-for="answer in answers" 
     v-model="answer.selectedOption"> 
    <option v-for="option in answer.options" 
      :value="option"> 
    {{option}} 
    </option> 
</select> 

Example.

Wenn Sie diesen Ansatz verwenden, können Sie die Standardoption für jede einzelne Auswahl verwalten. Sie werden auch wissen, was für jede Antwort automatisch ausgewählt wurde.