Home » vue » Displaying an icon which redirects to a link, instead of data value in bootstrap-vue table

Displaying an icon which redirects to a link, instead of data value in bootstrap-vue table

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have the following data which is returned from an API

let data = [
   {
    'doodle': 123,
    'moodle': 456,
    'link': 'wfw6f3gefvdf6w'
   },
    {
    'doodle': 123,
    'moodle': 496,
    'link': 'wsvsdvsd6fw7f6w'
  },
    {
    'doodle': 123,
    'moodle': 459,
    'link': 'wfw6fvsvf6w'
  },
    {
    'doodle': 123,
    'moodle': 406,
    'link': 'wfw6fvvfvf6w'
  }
]

displayed in the following table,

<div>
    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="journeyTable"></b-pagination>
    <p class="mt-3">Current Page: {{ currentPage }}</p>
    <div class="row">
        <div class="col-12">
            <card :title="title" :subTitle="subTitle">
                <div slot="raw-content" class="table-responsive">
                    <b-table id="my-table" :items="data" :per-page="perPage" 
                    :current-page="currentPage" striped hover small></b-table>
                </div>
            </card>
        </div>
    </div>
</div>

I’m looking at changing the “link” part of the data to an icon that redirects to the specified URL. How can this be achieved in bootstrap? I’m been using vuetify for some time now and messing around with templates and fields has my head in a spin.

Answers:

Use named scoped slots as mentioned in the docs:

<b-table
 id="my-table"
 :items="data"
 :per-page="perPage"
 :current-page="currentPage"
 striped
 hover
 small
>
  <!-- "link" is the name of the field in your data/fields -->
  <template slot="link" slot-scope="{ value }">
    <!-- this is just making a regular link -->
    <a href="`/some/util/${value}`">{{ value }}</a>
    <!-- or you could make an actionable badge -->
    <b-badge href="`/some/util/${value}`">{{ value }}</b-badge>
    <!-- or you could make an button with an icon/symbol -->
    <b-button href="`/some/util/${value}`">⇨</b-button>
  </template>
</b-table>

If using vue-router, and the link is local to your app, then use the to prop instead of the href prop on b-button, b-badge, or b-link, etc.