Passing arguments to button onclick method in vuejs

Question

I am trying to pass the selected values from the tag and pass it to a button’s click event. However, I was not able to get the data in the onclick function. See the code below.

I am getting undefined in the alert. Please help.

<div class=“form-group”>
   <div class=“form-group” align=“center”>
      <label for=“select-Year”>Select CMS Fiscal Year :</label>
      <select class=“form-control input-sm” style=“width:120px” id=“select-Year”>     
         <option v-for=“yr in years” value=“yr”>{{ yr }}</option>
      </select>
   </div>

   <br/><br/>

   <div class=“form-group” style=“align:center”>
      <button id=“btnSubmit” class=“btn btn-primary” style=“align:center” v-on:click=“loadData(yr, $event)”>Open</button>
   </div>
</div>

methods: {
  `loadData`: function(yr, event){
    alert(yr);
  }
}

tony19 · Accepted Answer · 2022-07-16 00:07:52Z

3

The yr variable only exists within the scope of option when you used v-for on it.

That's why it's causing an error when you try to pass it to the event handler of your button which is located outside the scope of v-for.

How can I get selected option?

One way to get the year selected is to declare a year variable under your component data attribute and use the v-model directive on your select field to form a two-way binding.

data: function() {
  return {
    year: null
  }
}

And in your select and button tags,

<select class="form-control input-sm" style="width:120px" id="select-Year" v-model="year">
  <option v-for="yr in years" value="yr">{{ yr }}</option>
</select>

<button id="btnSubmit" class="btn btn-primary" style="align:center" v-on:click="loadData($event)">Open</button>

In this way, you can get access to the year in loadData,

loadData(event) {
  console.log(this.year, event);
}

edited Jul 16, 2022 at 0:07

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 10, 2019 at 10:11

Ana Liza Pandac

4,8912 gold badges26 silver badges37 bronze badges

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

2 Comments

SM079 Over a year ago

Hi Ana, thanks for your response. i am creating that whole html code as a template using the <script type="text/x-template" id=""></script> option. for this vue.component() i have already have a data from where i am getting the array values for the for loop. Do i have to give the v-model for a property in that same vue.component or the vue instance ??

Ana Liza Pandac Over a year ago

Hey @Mani079, can you create a fiddle for this? It would make it faster and easier to resolve which shows how it's being used in another component.

user9635471 · Accepted Answer · 2019-01-10 10:30:11Z

2

I tried to do this for you, go to the page and see <https://jsfiddle.net/Lr3psu2y/>.
Hope it with help for you.

answered Jan 10, 2019 at 10:30

user9635471

1 Comment

SM079 Over a year ago

Thanks man. your code works perfectly. but it also throws a warning in the console as below "<option v-model="yrInd">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.". will it make any problem ?

Collectives™ on Stack Overflow

Passing arguments to button onclick method in vuejs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related