HTML button repeating in v-for loop in Vue.js, class on button not working to attached jQuery event handler

Question

I'm using a jQuery plugin that requires me to bind an event to a class on a button.

The button is repeated in a table like so:

<tr v-for="option in app.options">
  <td>{{ option.value1 }}</td>
  <td>{{ option.value2 }}</td>
  <td><button class="btn btn-primary next">Choose</button></td>
</tr>

However, when it renders the options (which are not set to begin with, they're set via an http request), and the button is clicked, the jQuery event isn't registered on the button even though it has the next class attached to it.

How can I get jQuery to recognize the button with the .next class when it's rendered by Vue.js?

Jeff · Accepted Answer · 2015-12-21 21:08:12Z

1

As the other answer states, it probably isn't registering the event because the next button doesn't exist at that point. I would use a vue directive to call a method on your component, then manually fire the jquery event within that method. So your button would be <td><button class="btn btn-primary next" v-on:click="fireJqueryEvent">Choose</button></td>

Then in your Vue component:

methods:{
    fireJqueryEvent(e){
        //run the function you need to run or use .trigger() to fire an event
    }
}

You could also wait until the Vuejs content has loaded before you call your jquery wizard.

edited Dec 21, 2015 at 21:08

answered Dec 21, 2015 at 20:57

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

HTML button repeating in v-for loop in Vue.js, class on button not working to attached jQuery event handler

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related