How to add a link to a Vuikit (Vuejs) table?

Question

I have tried literally everything to get this to work, and I am at the point of considering removing Vuikit...

I am simply trying to pass in some dynamic data to the component, and create a new HREF using the data whilst just displaying a LINK clickable text element :)

This is my table:

 <vk-table v-bind:data="paginatedData" narrowed>
            <vk-table-column-select></vk-table-column-select>
            <vk-table-column title="Vendor Name" cell="name"></vk-table-column>

            <vk-table-column title="Link">
                <a v-bind:href="policyUrl"></a>
            </vk-table-column>

            <vk-table-column title="Link2">
                <p cell="policyUrl"></p>
            </vk-table-column>

</vk-table>

The final two columns are left in to show some attempts I have made. The issue is that using Vuikit, the looping and using v-for is not available, so having to use the provided components...

Please help!

score 0 · Answer 1 · answered May 14 '18 at 19:35

I was helped out with the below pen from one of the contributors.

HTML

<div id="app" class="uk-padding">

  <vk-table :data="paginatedData" narrowed>
    <vk-table-column-select></vk-table-column-select>
    <vk-table-column title="Vendor Name" cell="name"></vk-table-column>

    <vk-table-column title="Link">
      <a href="mystaticurl">Static URL</a>
    </vk-table-column>

    <vk-table-column title="Link">
      <a slot-scope="{ row }" :href="row.link">{{ row.link }}</a>
    </vk-table-column>

  </vk-table>

</div>

JS

new Vue({
  el: '#app',
  data: () => ({
    paginatedData: [
      {name: 'row1', link: 'link1'},
      {name: 'row2', link: 'link2'}
    ]
  })
})

How to add a link to a Vuikit (Vuejs) table?

1 Answers1