web-dev-qa-db-ja.com

Bテーブルのv-slot：cell（）テンプレートで項目値を取得する方法-BootstrapVue

私はプログラミングが非常に新しいです。 store、vuex、bootstrap-vueテーブルを使用してリンク：hrefを取得するためにデータをバインドする方法を理解しようとしています。私はこれに4日間費やしましたが、今は死にかけています。助けてください。

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>
vue.jsdata-bindingbootstrap-vuev-slot
2
Chawchawchaw

セルスロットには、一般的に関心のある2つのプロパティが含まれています。

  • 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は参照されていますが定義されていません。詳細については、実施例をご覧ください。
そしてドキュメントを読んでください！

8
tao