CODEWITHSUNDEEP
vue.jsbootstrap-4bootstrap-vue
Mtlj1991
Mtlj1991

Reputation: 197

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

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.

Upvotes: 0

Views: 1212

Answers (1)

Troy Morehouse
Troy Morehouse

Reputation: 5435

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.

Upvotes: 2

Related Questions