无法在 b-table 上生成路由器-link 按钮

Question

在我的索引页上，我有一个 b-table 可以加载一些数据。其中一列用于一个按钮，该按钮应指向一个页面，该页面包含有关给定行中显示的对象的更多信息。所以我想我需要使用 v-html 方法，这样：

<template>
  <div>
    <b-table striped outlined hover :items="items" :fields="fields">
        <span slot="info" slot-scope="data" v-html="data.value"></span>
    </b-table>
  </div>
</template>

<script>
  export default {
    name: 'Blocks',
    data() {
      return {
        fields: ['first_name', 'last_name', 'age','info'],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald', info: 
          '<router-link to="/blocks/0"><b-button>Go to first block</b-button></router-link>'},
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw', info: 
          '<router-link to="/blocks/1"><b-button>Go to second block</b-button></router-link>'},
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson', info: 
          '<router-link to="/blocks/2"><b-button>Go to third block</b-button></router-link>'},
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney', info: 
          '<router-link to="/blocks/3"><b-button>Go to fourth block</b-button></router-link>'}
        ]
      }
    }
  }
</script>

（我目前只使用静态数据进行测试，不用担心变量名）

问题是：b-button 不会出现。不过，它适用于普通的 button。不仅如此，最糟糕的是 router-link 不会做任何事情。所以：

预期： 每行中有一个按钮，可以将我从特定行引导至信息页面。

得到： 只是按钮的标签，尚未链接到信息页面。

Answer 1

问题是 router-link 和 b-button 是 Vue 组件，而不是 HTML 元素，你不能在 v-html 指令中包含 Vue 模板，它只插入原始字符串 HTML.

您需要执行以下操作：

<b-table striped outlined hover :items="items" :fields="fields">
    <span slot="info" slot-scope="data">
        <router-link :to="'/blocks/' + data.value.block_id"><b-button>{{ data.value.description }}/b-button></router-link>
    </span>
</b-table>

您需要重新调整变量以匹配该格式，但这应该适合您。

无法在 b-table 上生成路由器-link 按钮

Can't generate a router-link button on a b-table

vue.js

vue-router

bootstrap-vue