VueJS 2のメソッドに値を送信

Question

selectChangeのコードで、row.question_idとoption.AnswerMasterIDの値を取得するにはどうすればよいですか？私はVue.js v2を使用しています。

<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, answer.AnswerDescription)"> 
     <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> 

次のように私の方法は次のとおりです。

selectChange: function (question_id, ans_master_id) { 
    alert(question_id + " " + ans_master_id) 
}, 

私は、内側のループであるoption.AnswerMasterIDの値を取得したいです。

Answer 1

それにデータプロパティをバインドするために、select要素にv-modelディレクティブを使用します。

<select class="dropdown_cl" v-model="selectedID" ... 

あなたはデータのプロパティにselectedIDを追加していることを確認してください：

data() { 
    return { 
    selectedID: null, 
    } 
} 

すでにoption.AnswerMasterIDを結合しているので、各オプションの値としてselectedIDは、選択したオプションのAnswerMasterIDにバインドされます。

次に、あなたのselectChange方法では、このようにその値を参照することができます：あなたは正確に何を意味

selectChange: function (question_id) { 
    alert(question_id + " " + this.selectedID); 
}, 

Here is Vue's documentation for select input binding.