How to get item value in v-slot:cell() template of b-table - BootstrapVue

Question

I'm a very new at programming. I'm trying to figure it out how to bind the data to get the link :href work using store, vuex and bootstrap-vue table. I have spent 4 days for this, and now I'm dying. Please help.

books.js(store, vuex)

books: [
    {
      id: 1,
      name: "name 1",
      bookTitle: "book1",
      thumbnail: '../../assets/img/book01.jpeg',
      url: "https://www.google.com",
      regDate: '2019-10'
    },
    {
       id: 2,
      name: "name2",
      bookTitle: "book2",
      thumbnail: "book2",
      url: "http://www.yahoo.com",
      regDate: '2019-10'
    },

BookList.vue

Answer 1

The cell slot contains two properties you're generally interested in:

• item (the current row, or, to be exact, the current item in items)
• value (the cell - or, to be exact, the value of the current column within the item).

Therefore, considering your data, in the case of v-slot:cell(url)="{ value, item }", value is equivalent to item.url

Any of these would work:

<template v-slot:cell(url)="{ value }">
  <b-link :href="value">link</b-link>
</template>

<template v-slot:cell(url)="slot">
  <b-link :href="slot.value">{{ slot.item.bookTitle }}</b-link>
</template>

<template v-slot:cell(url)="{ item }">
  <b-link :href="item.url">{{ item.bookTitle }}</b-link>
</template>

Working example here.

---

Note your question contains a few minor issues which might prevent your code from working (itemFields is referenced but not defined, not using proper getters, etc...). For details have a look at the working example.
And read the docs!