How to give a link to each row in bootstrap-vue table

Question

I have an bootstrap-vue table in my project. I want to give each row a link ( something like code below )

<template #row>
 <div @click="goToPage">
    {{ item.name}}
 </div>
</template>

but do not know how to access table tr in bootstrap codesandbox

i would really appreaciate if someone can help me with it

Answer 1

You can add selectable to your table and event row-selected :

<b-table select-mode="single" ref="selectableTable" selectable @row-selected="onRowSelected" small :fields="fields" :items="items" responsive="sm">

and then create method:

methods: {
  onRowSelected(item) {
    console.log(item)
  }
}

Answer 2

You can use the @row-clicked event, which as the name suggests is triggered when a row is clicked.

The method is sent the item for the row which was clicked, so you can access any information from the item if needed. Along with the index and native click event .

 new Vue({ el:"#app", data: () => ({ items: [ { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { age: 11, first_name: 'Larsen', last_name: 'Shaw' }, { age: 89, first_name: 'Geneva', last_name: 'Wilson' }, { age: 38, first_name: 'Jami', last_name: 'Carney' } ] }), methods: { onRowClicked(item, index, event) { console.log(item) } } });

 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script> <div id="app" class="p-3"> <b-table striped hover:items="items" @row-clicked="onRowClicked"></b-table> </div>