CODEWITHSUNDEEP
vue.jsvuejs2v-for
sm12
sm12

Reputation: 125

Send values into method in VueJS 2

How can I get the values of row.question_id and option.AnswerMasterID in the method selectChange in the below code? I am using 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>

My method is as follows:

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

I want to get the value of option.AnswerMasterID which is in the inner loop.

Upvotes: 0

Views: 669

Answers (1)

thanksd
thanksd

Reputation: 55674

Use a v-model directive on the select element to bind a data property to it:

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

Make sure you add selectedID to the data properties:

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

Since you are already binding option.AnswerMasterID as the value of each option, selectedID will be bound to the AnswerMasterID of the selected option.

You can then reference that value like this in your selectChange method:

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

Here is Vue's documentation for select input binding.

Upvotes: 1

Related Questions