Vue Router link using another column data path in Vue Bootstrap table

Question

I have table with users datas in vue bootstrap. I'm using Vue Router to go on user profile page too. Profile pages path is /user/idNumber and I want to route it under Name. Something like this:

<a href="/users/idNumber"> Name </a>

How I can do that?

Code:

<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.value}`">{{ data.value }}</router-link>
    </template>
</b-table>

usersList:

[{"_id":"5df9663acf06e2001742ac17","name":"Retdadada5155465","lastname":"Nienow","email":"[email protected]","age":"1995","gender":"female","weight":58,"height":166,"activity":1.4,"value":3,"_createdOn":"2019-12-17T23:35:22.339Z","_updatedOn":"2019-12-19T20:57:30.588Z"},{"_id":"5df842f2cf06e2001742a8ec","name":"Retdadada516","lastname":"Nienow","email":"[email protected]","age":"1993","gender":"female","weight":58,"height":166,"activity":1.4,"value":3,"_createdOn":"2019-12-17T02:52:34.183Z","_updatedOn":"2019-12-19T20:57:42.352Z"},{"_id":"5df7c972bca42200177decb4","name":"Lue","lastname":"Schneider","email":"[email protected]","age":"1997","gender":"female","weight":60,"height":180,"activity":1.6,"_createdOn":"2019-12-16T18:14:10.554Z","_updatedOn":"2019-12-19T20:57:51.550Z"}]'

fields:

["_id",
                {
                    key: "fullname",
                    label: "Fullname",
                    sortable: true,
                    formatter: (value, key, item) => {
                        return item.name + " " + item.lastname
                    },
                },
                {
                    key: "birthYear",
                    label: "Age: ",
                    sortable: true,
                    formatter: (value, key, item) => {
                        return new Date().getFullYear() - item.age
                    },
                },
            ],

Regards

So you should be able to click on the name, and then it should redirect you, right? — Jesper
– Jesper, Commented Dec 19, 2019 at 21:43

Jesper · Accepted Answer · 2019-12-19 21:53:28Z

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

answered Dec 19, 2019 at 21:53

Jesper

3,8422 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kuba1pie Over a year ago

Thanks! Now it'ok, I earlier tried with only ":to="/user/${item._id}"... Quite shame.

Matt U · Accepted Answer · 2019-12-19 21:57:02Z

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.

answered Dec 19, 2019 at 21:57

Matt U

5,12811 silver badges28 bronze badges

Collectives™ on Stack Overflow

Vue Router link using another column data path in Vue Bootstrap table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related