CODEWITHSUNDEEP
vue.jsvue-routerbootstrap-vue
Tadeu Moreira
Tadeu Moreira

Reputation: 31

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

On my index page I have a b-table that loads some data. One of the columns is for a button that should lead to a page containing more information about the object displaying in a given row. So I thought I needed to use v-html method, this way:

<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>

(I'm currently only using static data just for testing, and don't worry about the variable names)

The thing is: the b-button won't appear. It works with ordinary button though. Not only that but the worst part is the router-link won't do anything. So:

Expected: a button in each row that would lead me to an infos page from a certain row.

Got: just the labels from the button, that hasn't been linked to an infos page.

Upvotes: 1

Views: 1896

Answers (1)

rh16
rh16

Reputation: 1073

The problem is that router-link and b-button are Vue components, not HTML elements, and you can't include Vue templates in a v-html directive, it just inserts the string as raw HTML.

You'll need to do something like:

<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>

You'll need to rejig your variables to match that format, but that should work for you.

Upvotes: 1

Related Questions