Tengo una tabla bootstrap-vue en mi proyecto. Quiero darle a cada fila un enlace ( algo así como el código a continuación )
<template #row> <div @click="goToPage"> {{ item.name}} </div> </template>pero no sé cómo acceder a la tabla tr en bootstrap codesandbox
Realmente agradecería si alguien me puede ayudar con eso.
Puede agregar selectable a su tabla y row-selected :
<b-table select-mode="single" ref="selectableTable" selectable @row-selected="onRowSelected" small :fields="fields" :items="items" responsive="sm">y luego crea el método:
methods: { onRowSelected(item) { console.log(item) } }Puede usar el evento @row-clicked , que, como sugiere el nombre, se activa cuando se hace clic en una fila.
El método envía el item de la fila en la que se hizo clic, por lo que puede acceder a cualquier información del elemento si es necesario. Junto con el index y el event de clic nativo.
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>