Я хочу реализовать компонент разбивки на страницы b-pagination w/bootstrap-vue, но он будет отображать только первую страницу. Я следую настройке в документации, но они показывают только пример с использованием таблицы, а не неупорядоченного списка. У меня есть :
<template>
<div class = "results overflow-auto" v-cloak>
<h3>Search Results</h3>
<modal v-if = "showModal" @close = "showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<template v-slot:header>
<h1>NASA Image</h1>
</template>
<template v-slot:body>
<b-img class = "modal-image" v-bind:src = "attribute"></b-img>
</template>
</modal>
<!-- ======== Pagination Markup ============ -->
<b-pagination
v-model = "currentPage"
:total-rows = "rows"
:per-page = "perPage"
:items = "items"
aria-controls = "my-list"
></b-pagination>
<p class = "mt-3">Current Page: {{ currentPage }}</p>
<!-- ==========End Pagination Markup ======== -->
<!-- Limit output to 100 items -->
<ul
class = "search-results"
id = "my-list"
>
<li v-for = "(item, index) in propsResults.items.slice(0,100)" :key = "index">
{{ item.data[0].title}}
<span>
<b-img
thumbnail
class = "thumbnail"
:src = "item.links[0].href"
alt = "Fluid image"
id = "show-modal"
v-on:click = "imageModal"
></b-img>
</span>
</li>
</ul>
</div>
</template>
и мой javascript:
export default {
name: "SearchResults",
props: ["propsResults"],
data() {
return {
showModal: false,
attribute: "",
perPage: 10,
currentPage: 1,
items: this.$props.propsResults.items
};
},
computed: {
rows() {
return this.$props.propsResults.items.length;
}
}
Компонент разбивки на страницы отображает все 100 элементов массива элементов на одной странице. Я также должен отметить, что я не вижу массив элементов в объекте реквизита b-pagination для инструментов Vue dev в FF. это нормально? Любое понимание ценится ..
Вы по-прежнему должны использовать currentPage для выбора элементов для отображения. Компонент b-pagination изменяет только это число.
Попробуйте использовать эту строку:
<li v-for = "(item, index) in items.slice(10*(currentPage-1),10*(currentPage))" :key = "index">