[Vuejs]-Vue Router link using another column data path in Vue Bootstrap table

by

1👍

✅

A little change to your second template with the fullname does the job. The first one should be alright as i see it already.

You just have to use the data.item instead, to utilize whatever data is in the looped item

<template>
  <b-table striped hover :items="usersList" :fields="fields">
    <template v-slot:cell(_id)="data">
      <router-link :to="`/user/${data.value}`">{{ data.value }}</router-link>
    </template>
    <template v-slot:cell(fullname)="data">
      <router-link :to="`/user/${data.item._id}`">{{ data.value }}</router-link>
    </template>
  </b-table>
</template>

Working sandbox: https://codesandbox.io/s/bootstrap-vue-sandbox-wvv9j

👤Jesper

0👍

If you look at the documentation here: https://bootstrap-vue.js.org/docs/components/table/#scoped-field-slots you see that when using a scoped field slot, the data object has several properties. One of them is item which represents the item for that row as a whole. So you can do this instead:

<router-link :to="`/user/${data.item.someProperty}`">
    {{data.value}}
</router-link>

Where someProperty is the property of the user object you want to put in the route path.

👤Matt U

Leave a comment