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

Question

我是一个非常新的编程。我试图弄清楚如何绑定数据以获取链接 :href 使用 store、vuex 和 bootstrap-vue 表工作。我为此花了 4 天时间，现在我快要死了。请帮忙。

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

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'
    },

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

Answer 1

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

• item（当前行，或者，准确的说，目前item在items）
• value（单元格 - 或者，确切地说，是value中当前列的item）。

因此，考虑您的数据，在 的情况下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 等......）。有关详细信息，请查看工作示例。
并阅读文档！