Dynamic "on click" events during v-for loop in Vue

Question

I'm looping through an array that outputs several buttons into a table. I'm wanting to dynamically set the method that's called when that button is clicked. It is correctly pulling in everything else from the array, but it's not setting the method (so the buttons do nothing when clicked)

Here is my code for the v-for loop:

<tr v-for="button in buttons" :key="button.id">
   <td>
      <button @click="button.method">{{button.name}}</button>
   </td>
</tr>

And here is the code within the data object of the Vue component

 buttons : [
            {id : 1, name : 'Button 1', method : 'buttonOne'},
            {id : 2, name : 'Button 2', method : 'buttonTwo'},
        ],

If I manually set the method called, then everything works correctly. But every button calls the same method. Rather than "buttonOne, buttoneTwo, etc"

<button @click="buttonOne">{{button.name}}</button> //This works but each button has the buttonOne method being called on-click

tony19 · Accepted Answer · 2018-04-05 21:20:28Z

11

Instead of using the method name for the method field, specify the method itself:

// method: 'buttonOne'  // DON'T DO THIS
method: this.buttonOne

new Vue({
  el: '#app',
  data() {
    return {
      buttons : [
        {id : 1, name : 'Button 1', method : this.buttonOne},
        {id : 2, name : 'Button 2', method : this.buttonTwo},
      ],
    };
  },
  methods: {
    buttonOne() {
      console.log('buttonOne');
    },
    buttonTwo() {
      console.log('buttonTwo');
    }
  }
})

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <table>
    <tr v-for="button in buttons" :key="button.id">
       <td>
          <button @click="button.method">{{button.name}}</button>
       </td>
    </tr>
  </table>
</div>

edited Apr 5, 2018 at 21:20

answered Apr 5, 2018 at 21:15

tony19

140k23 gold badges281 silver badges354 bronze badges

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

Comments

Medvik · Accepted Answer · 2021-01-09 22:53:31Z

1

if @tony19 answer is not Clare enough try this.

export default {
    name: 'app',
    data() {
        return {
          buttons : [
            {id : 1, name : 'Button 1', method : this.buttonOne},
            {id : 2, name : 'Button 2', method : this.buttonTwo},
          ],
}
}}

answered Jan 9, 2021 at 22:53

Medvik

851 silver badge7 bronze badges

Collectives™ on Stack Overflow

Dynamic "on click" events during v-for loop in Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related