Create a link inside vue bootstrap b-table cell

Question

I have a b-table compo

<b-table responsive 
         hover 
         :items="myItems" 
         :fields="myField">

On my items, I return a url from the back-end, so I want to do on my template

<template slot="my-link" slot-scope="data">
    <a href="data.item.link">link</a>
 </template>

The above doesn't work, it renders

<a href="data.item.link">link</a>

Instead of

<a href="https://mylink.com">link</a>

Answer 1

You should bind it using v-bind:href="..." or shortly :href="..." with b-link component :

 <template slot="my-link" slot-scope="data">
    <b-link :href="data.item.link">link</b-link>
</template>

Answer 2

If you want your data to be interpreted as a javascript object you need to specify it by using v-bind: or :. Other way its only a string.

So in your case you should do something like.

<a :href="data.item.link">link</a>