how to add HREF link on each row using Vuetables VUE.JS

Question

I've been working VUEJS Vuetables, despite I read about components and slots I cannot figure how to add a link with the following structure on each row:

<td class="text-center">
<a href="{{ url('/order/'.$order->id) }}" class="btn btn-outline btn-danger btn-lg"><i class="fas fa-globe"></i>
</a>
</td>

1- I created a the column

        data: {
            columns: [
                {
                    name: '__component:gcp-actions',
                    title: 'Actions',
                    titleClass: 'text-center',
                    dataClass: 'text-center'
                }

2- I created gcpaction component:

<template>
    <div class="custom-actions">
        <a v-bind:href="rowData.view" v-if="show" class="btn btn-flat bg-green btn-sm"><i
                class="glyphicon glyphicon-zoom-in"></i></a>
        <button class="btn btn-flat bg-red btn-sm" @click="itemAction('delete-item', rowData, rowIndex)"><i
                class="glyphicon glyphicon-trash"></i></button>
    </div>
</template>

I tried with <a> and with <button>

3- I registered the component in my table:

import GcpActions from './GcpActions'
Vue.component('gcp-actions', GcpActions)

4- When I render I can see the whole table but I cannot see the component in my table:

<vtable url="orders/filter" :columns="columns" :filters="filters"></vtable>

any help appreciated.

user10543119 · Accepted Answer · 2019-03-11 21:29:08Z

2

Have you tried scoped slots?

<span slot="columnName" slot-scope="props">
    <a href="/profiles/{{columnName.if}}"></a>
</span>

answered Mar 11, 2019 at 21:29

user10543119

1615 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to add HREF link on each row using Vuetables VUE.JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related