如何在 b-table 的 v-slot:cell() 模板中获取项目值 - BootstrapVue

Question

我是编程新手。我正在尝试弄清楚如何使用存储、vuex 和 bootstrap-vue 表绑定数据以获取链接 ：href 工作。我为此花了 4 天的时间，现在我快死了。请帮忙。

书籍.js(商店，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'
},

书单.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>

Answer 1

单元格槽包含您通常感兴趣的两个属性：

• item(当前行，或者准确地说，items中的当前item(
• value(单元格 - 或者准确地说，item中当前列的value(。

因此，考虑到您的数据，在v-slot:cell(url)="{ value, item }"的情况下，value等同于item.url

以下任何一项都可以工作：

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

这里的工作示例。

请注意，您的问题

---

包含一些小问题，这些问题可能会阻止您的代码工作(itemFields被引用但未定义，未使用正确的getter等(。有关详细信息，请查看工作示例。
并阅读文档！