Vue路由器链接在b表中不起作用

Question

基于以下教程：https://youtu.be/4deVCNJq3qc?t=7710

问题>我能够按预期显示该表。但是，表列名称不显示超链接。我该怎么做才能解决此问题？

谢谢

  "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似乎已经改变了自定义数据渲染的方式。您的模板应为：

<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