无法在 b 表上生成路由器链接按钮

Posted 2023-02-22

【中文标题】无法在 b 表上生成路由器链接按钮

【英文标题】：Can't generate a router-link button on a b-table

【发布时间】：2019-10-13 10:35:32

【问题描述】：

在我的索引页面上，我有一个 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 不会做任何事情。所以：

预期：每一行都有一个按钮，可以引导我从某一行进入信息页面。

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

【参考方案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>

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

【讨论】：

我添加了一些字段后它就可以工作了，非常感谢