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

user_15636170 0
Viewed 196

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?

bootstrap-vue
1 Answers

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>

user_65955510
Related