title: Bootstrap Table row-clicked event
body: <p>I'm using a <code>&lt;b-table&gt;</code> 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 <code>@row-clicked</code> property in <code>b-table</code> 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...</p>
  <p>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 <code>b-table</code> component;</p>
  <pre><code>      &lt;b-table
          :items=&quot;displayByType&quot;
          :fields=&quot;displayColumn&quot;
          responsive=&quot;sm&quot;
          :per-page=&quot;perPage&quot;
          :current-page=&quot;currentPage&quot;
          :sort-by.sync=&quot;sortBy&quot;
          :sort-desc.sync=&quot;sortDesc&quot;
          :filter=&quot;filter&quot;
          :filter-included-fields=&quot;filterOn&quot;
          @filtered=&quot;onFiltered&quot;
          hover
          @row-clicked=&quot;test&quot;
        &gt;
  </code></pre>
  <p>And here is the two functions that I want to be triggered when a row is clicked...</p>
  <pre><code>toggleRightBar(){
    document.body.classList.toggle(&quot;right-bar-enabled&quot;);
  }
  
  changeRightBarContent(row){
    this.$store.dispatch(&quot;rightbar/changeRightBarInfo&quot;, tableData[row]);
  },
  </code></pre>
  <p>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.</p>
  <p>At last, here is the button that I use to make these two functions work;</p>
  <pre><code>        &lt;template #cell(detail)=&quot;row&quot;&gt;
            &lt;button @click=&quot;toggleRightBar(); changeRightBarContent(row.index);&quot; class=&quot;btn btn-outline-primary toggle-right&quot;&gt;
              &lt;i class=&quot;bx bx-detail toggle-right&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;
          &lt;/template&gt;
  </code></pre>
  <p>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 <code>@row-clicked</code></p>
  <p>Thanks in advance.</p>