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

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

CodePudding user response：

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)
  }
}

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/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/[email protected]/dist/bootstrap-vue.js"></script>


<div id="app" >
  <b-table striped hover :items="items" @row-clicked="onRowClicked"></b-table>
</div>