web-dev-qa-db-fra.com

Comment obtenir la valeur d'un élément dans v-slot: modèle cell () de b-table - BootstrapVue

Je suis très nouveau en programmation. J'essaie de comprendre comment lier les données pour obtenir le lien: travail href en utilisant la table store, vuex et bootstrap-vue. J'ai passé 4 jours pour ça, et maintenant je meurs. Veuillez aider.

books.js (magasin, 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

L'emplacement de cellule contient deux propriétés qui vous intéressent généralement:

  • item (la ligne courante, ou, pour être exact, la item courante dans items)
  • value (la cellule - ou, pour être exact, le value de la colonne courante dans le item).

Par conséquent, compte tenu de vos données, dans le cas de v-slot:cell(url)="{ value, item }", value est équivalent à item.url

N'importe lequel de ces éléments fonctionnerait:

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

Exemple de travail ici .

Notez que votre question contient quelques problèmes mineurs qui pourraient empêcher votre code de fonctionner (itemFields est référencé mais non défini, n'utilise pas les getters appropriés, etc ...). Pour plus de détails, consultez l'exemple de travail.
Et lisez les documents!

8
tao