How to get item value in v-slot:cell() template of b-table - BootstrapVue
11,198
The cell slot contains two properties you're generally interested in:
-
item
(the current row, or, to be exact, the currentitem
initems
) -
value
(the cell - or, to be exact, thevalue
of the current column within theitem
).
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!
Author by
Chawchawchaw
Updated on June 18, 2022Comments
-
Chawchawchaw almost 2 years
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>