Как добавить ссылку на таблицу Vuikit (Vuejs)? - PullRequest
Новая
       15

Как добавить ссылку на таблицу Vuikit (Vuejs)?

0 голосов
/ 13 мая 2018

Я попробовал буквально все, чтобы заставить это работать, и я собираюсь удалить Vuikit ...

Я просто пытаюсь передать некоторые динамические данные компоненту и создатьновый HREF с использованием данных, в то время как просто отображаемый текстовый элемент LINK:)

Это моя таблица: 

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

Последние два столбца оставлены, чтобы показать некоторые попытки, которые я предпринял.Проблема в том, что при использовании Vuikit цикл и использование v-for недоступны, поэтому приходится использовать предоставленные компоненты ...

Пожалуйста, помогите!

1 Ответ

0 голосов
/ 14 мая 2018

Мне помогла ручка ниже, написанная одним из авторов.

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'}
    ]
  })
})
...