Как получить значение элемента в v-слоте: cell() шаблон b-таблицы-BootstrapVue
Я очень новичок в программировании. Я пытаюсь понять, как связать данные, чтобы получить ссылку: 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
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ссылается, но не определен,не использует правильные геттеры и т. д...). Для получения дополнительной информации взгляните на рабочий пример.
И читайте документы!