Component $emit seems to stop event propagation in Bootstrap Vue table - bootstrap-vue

Question

I'm trying to do something like this in a BV table to send the result of a row click to a parent component using the row-clicked event:
<template>
<div>
<b-table :items='totals' selectable select-mode='single' hover #row-clicked='rowClicked'></b-table>
</div>
</template>
<script>
export default {
data: function() {
return { }
},
props: ['totals'],
methods: {
rowClicked(rowData) {
this.$emit("filter-total", rowData.total)
}
}
}
</script>
The $emit works fine, but seems to prevent the row-selected event, as the row never gets selected (which is confusing for the user). If I replace the $emit with something else, the row is selected correctly.
Why is this happening and how can I prevent it?

Answer 1

I implement your case in the code snippet, I think your problem is because of the bootstrap-vue version that you are using. Upgrade your bootstrap-vue package to the latest version and your problem should be solved.
Vue.component("customComponent", {
template:
"<b-table :items='items' selectable select-mode='single' hover #row-clicked='rowClicked' />",
data() {
return {
items: [
{
isActive: true,
age: 40,
first_name: "Dickerson",
last_name: "Macdonald"
},
{ isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw" },
{ isActive: false, age: 89, first_name: "Geneva", last_name: "Wilson" },
{ isActive: true, age: 38, first_name: "Jami", last_name: "Carney" }
]
};
},
methods: {
rowClicked(items) {
this.$emit("filter-total", items.age);
}
}
});
new Vue({
el: "#app",
methods: {
do_sth(value) {
console.log(value);
}
}
});
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<custom-component #filter-total="do_sth" />
</div>