Send values into method in VueJS 2

Question

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.

What you exactly mean ? Since you passed 2 parameters into selectChange method, you should allow your method to accept them selectChange(id, desc) { console.log(id, desc)} and It would log the data what's passed when method is fired. — Belmin Bedak
– Belmin Bedak, Commented Apr 18, 2017 at 13:10

tony19 · Accepted Answer · 2022-07-15 22:46:21Z

1

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.

edited Jul 15, 2022 at 22:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 18, 2017 at 13:59

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sm12 Over a year ago

this works but I have different values for each select and the first option value for each is different. So if I write selected : ' ' and v-model="selected" then I am getting blank as the selected element for all the select elements. How to solve this?

thanksd Over a year ago

@sagarmajumdar That sounds like a different question, which I think you've already posted?

Collectives™ on Stack Overflow

Send values into method in VueJS 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related