vue.jsvue-events

Vue table row-contextmenu event not firing?

I would like to open a custom context menu whenever the user clicks on a table cell in my vue page. So I'm trying to use the row-contextmenu event as defined here, but it doesn't fire.

Table in the template:

<b-table @row-clicked="leftClicked" @row-contextmenu="rightClicked" border no-border-collapse striped :fields="fields" hover :items="items"></b-table>

Vue methods:

leftClicked() {
    alert("clicked");
},
rightClicked() {
    alert("right clicked")
}

The standard row-clicked event works fine and gets fired when i left-click on any row in the table. row-dblclicked also works fine. However, the row-contextmenu event doesn't even get fired to begin with and the standard browser context menu appears, even if i use @row-contextmenu.prevent (Chrome & Firefox). There are no errors in the console in both browsers.

The examples on bootstrap-vue and jsfiddles work fine in both browsers. So it seems to be a local problem?

Thanks for any help :)

Solution

  • It turned out that my bootstrap-vue version was too old. I upgraded to 2.14.0 and everything is working fine.