Vue router-link doesn't work within b-table

Question

Based on the following tutorial: https://youtu.be/4deVCNJq3qc?t=7710

Question> I am able to show the table as expected. However, the table column name doesn't show a hyper-link. What should I do to fix the issue?

Thank you

  "dependencies": {
    "bootstrap-vue": "^2.11.0",
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vuex": "^3.1.3"
  },



<template>
  <div>
    <h1>Cats for Adoption</h1>

    <b-table striped hover :items="cats">
      <template slot="name" slot-scope="data">
        <router-link :to="`/pets/${data.value}`">{{ data.value }}</router-link>
      </template>
    </b-table>
  </div>
</template>

<script>
import cats from "@/data/cats";

export default {
  data() {
    return { cats: cats };
  }
};
</script>

# /data/cats.js
export default [
  {
    name: "Fish",
    breed: "tuxedo",
    species: "cat",
    gender: "male",
    age: 20,
    color: "black/white",
    weight: 13,
    location: "fourside",
    notes: "Sweet kitty. He loves getting his belly rubbed."
  }
];

Answer 1

Bootstrap-Vue appears to have changed the way you do custom data rendering. Your template should be:

<b-table striped hover :items="cats">
  <template v-slot:cell(name)="data">
    <router-link :to="`/pets/${data.value}`">{{ data.value }}</router-link>
  </template>
</b-table>

CodeSandbox demo