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

问题在于，路由器链接和b按钮是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表上生成router-link按钮

1 个答案: