v-on Click not working for bootstrap modal button

Question

Bootstrap modal is linked with a button. I want to get some data on click. But the bootstrap default event is not letting the v-on:click event to trigger. Any help will be appreciated.

<a data-id="{{ $order->id }}" data-toggle="modal" class="changeartwork" data-target="#uploadModal" @click="getData()">Upload</a>

Answer 1

Use: v-on:click.prevent.stop="getData()" instead. This will stop the on click bubbling up to Bootstrap and overriding it.

See here for more info: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

Note: It's possible that .prevent would be enough but without a test case, I'm not sure so just give it a go and see which works.