CODEWITHSUNDEEP
vue.jsbootstrap-vue
Yasin Demirkaya
Yasin Demirkaya

Reputation: 271

Bootstrap Table row-clicked event

I'm using a <b-table> component in a Vue project and I need to define a function to be triggered when a row is clicked. I heard that there is a @row-clicked property in b-table so I tried to use it and I can put simple functions inside of it, I mean I can get console prints etc but nothing more complicated...

I want two functions to be executed when a row is clicked. The functions are now bound to a button inside of every row, but I dont want use it like this, I just need to click the related row to make them work. Here is the current version of the b-table component;

      <b-table
        :items="displayByType"
        :fields="displayColumn"
        responsive="sm"
        :per-page="perPage"
        :current-page="currentPage"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        :filter="filter"
        :filter-included-fields="filterOn"
        @filtered="onFiltered"
        hover
        @row-clicked="test"
      >

And here is the two functions that I want to be triggered when a row is clicked...

toggleRightBar(){
  document.body.classList.toggle("right-bar-enabled");
}

changeRightBarContent(row){
  this.$store.dispatch("rightbar/changeRightBarInfo", tableData[row]);
},

There is a JavaScript folder that I export column names and row data. I also a have Rightbar, when a row is clicked, I want to enable the rightbar so that the user can see detailed information about that specific row.

At last, here is the button that I use to make these two functions work;

        <template #cell(detail)="row">
          <button @click="toggleRightBar(); changeRightBarContent(row.index);" class="btn btn-outline-primary toggle-right">
            <i class="bx bx-detail toggle-right"></i>
          </button>
        </template>

Basically, I dont want to use this button, instead, I want to click the row itself. Every row's rightbar information will be uniqe, my function does that. I just dont know how to use these 2 functions inside @row-clicked

Thanks in advance.

Upvotes: 2

Views: 7606

Answers (1)

Hiws
Hiws

Reputation: 10404

The row-clicked event will pass 3 parameters to your function. The first being the item specific to the row that was clicked. The second will be the index of the row, and the third is a native click event.

This means you can use the arguments keyword to get the index and pass it to your function.

@row-clicked="toggleRightBar(); changeRightBarContent(arguments[1])".

Alternatively you can create a third method which will call the other two.

<b-table @row-clicked="onRowClicked" />

{
  onRowClicked(item, index, event) {
    this.toggleRightBar();
    this.changeRightBarContent(index);
  }
}

You can read more about the @row-clicked event on the docs component reference section. https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-events

Upvotes: 2

Related Questions