将值发送到 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.