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

<script>
export default {
  name: "BookList",
  components: {
  },
  computed: {
    fields() {
      return this.$store.state.fields
    },
    books() {
      return this.$store.state.books
    },
    bookUrl() {
      return this.$store.state.books.url
    }
  },
  data() {
    return {
      itemFields: this.$store.state.fields,
      items: this.$store.state.books,
      //url: this.$store.state.books.url
    }
  }

};
</script>

<template>
  <b-container>
    <b-table striped hover :items="items" :fields="itemFields" >
      <template v-slot:cell(thumbnail)="items">
          <img src="" alt="image">
      </template>
      <template v-slot:cell(url)="items">
          <b-link :href="bookUrl" >link</b-link>
      </template>
    </b-table>
  </b-container>
</template>

Reptile

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!

Erlanger

This is amazing. Oh my god. Thank you so much for helping me out. It works! All of them works perfectly. and Thanks for the note. I really do appreciate – Reptile

Thanks a lot, the docs are a little bit messy regarding the b-table – Coenurus