Как получить значение элемента в v-слоте: cell() шаблон b-таблицы-BootstrapVue

Как получить значение элемента в v-слоте: cell() шаблон b-таблицы-BootstrapVue

20.10.2019 05:32:16 Просмотров 111 Источник

Я очень новичок в программировании. Я пытаюсь понять, как связать данные, чтобы получить ссылку: href работает с использованием таблицы store, vuex и bootstrap-vue. Я потратил на это 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'
    },

Буклист.вю

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

У вопроса есть решение - Посмотреть?

Ответы - Как получить значение элемента в v-слоте: cell() шаблон b-таблицы-BootstrapVue / How to get item value in v-slot:cell() template of b-table - BootstrapVue

Является ответом!
Andrei Gheorghiu

20.10.2019 06:57:03

Ячейка слот содержит два свойства, которые вы обычно заинтересованы в:

  • 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ссылается, но не определен,не использует правильные геттеры и т. д...). Для получения дополнительной информации взгляните на рабочий пример.
И читайте документы!

https://stackoverflow.com/questions/58474034/how-to-get-item-value-in-v-slotcell-template-of-b-table-bootstrapvue/58474739#comment103290291_58474739
Это потрясающе. Боже мой. Большое спасибо за помощь. Это работает! Все они прекрасно работают. и спасибо за записку. Я действительно ценю
Закрыть X