將值發送到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

使用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.