Vue.js 引导vue组件在单击时不更改页面
我想实现一个分页组件b-pagination w/bootstrap vue,但它只显示第一页。我遵循文档中的设置,但它们只显示了一个使用表格的示例,而不是无序列表。我有:Vue.js 引导vue组件在单击时不更改页面,vue.js,bootstrap-vue,Vue.js,Bootstrap Vue,我想实现一个分页组件b-pagination w/bootstrap vue,但它只显示第一页。我遵循文档中的设置,但它们只显示了一个使用表格的示例,而不是无序列表。我有: <template> <div class="results overflow-auto" v-cloak> <h3>Search Results</h3> <modal v-if="showModal" @close="showModal = fa
<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>
分页组件在一个页面上显示items数组的所有100项。我还应该注意,我在FF中的每个Vue开发工具的b-pagination props对象中没有看到items数组。这正常吗?任何细节都值得欣赏。您仍然应该使用currentPage来选择要显示的项目。b分页组件仅更改该数字 尝试使用以下行:
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;
}
}