尝试在 Vuejs 中的列表和网格视图中借助分页显示数据时出现问题?

Question

https://codepen.io/santoshch/pen/wvJBjKq

//grid and list view code
<div class="bar">
<a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
<a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>

</div>
<ul v-if="layout == 'grid'" class="grid">
<!-- A view with big photos and no text -->
<p>a</P>
<p>b</p>
<p>c</P>
<p>c</p>
<p>e</P>
<p>f</p>  <p>g</P>
<p>h</p>  <p>u</P>
<p>z</p>

</ul>
<ul v-if="layout == 'list'" class="list">
<p>83</P>
<p>27</p>
<p>526</P>
<p>131</p>
<p>11</P>
<p>3</p>  <p>1</P>
<p>5</p>  <p>2</P>
<p>3</p>
</ul>

<template>
//pagination code
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="my-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
</template>

我有网格和列表视图功能，我成功地在它们之间切换并查看数据，现在的问题是

切换时，我在网格和列表视图中有一些数据，所以现在我想在分页的帮助下只显示有限的数据 即，在网格视图中为 12 个项目并列出为 8 个项目。

这是我的工作代码笔链接。 https://codepen.io/santoshch/pen/wvJBjKq

Answer 1

你需要一个体面的数据数组来显示你想要显示的项目。 就像您只想在网格视图中显示 12 个项目一样，那么您应该确保在使用v-for时，您只需在网格中循环 12 次，在列表中循环 8 次。

<template>
<div id="app">
<ul v-if="layout === 'grid'" class="grid-view">
<li
v-for="item in items.slice(
pagination.grid.start,
pagination.grid.limit
)"
:key="item.id"
class="grid-item"
>
<img :src="item.imageSrc" />
</li>
</ul>
<ul v-if="layout === 'list'" class="list-view">
<li
v-for="item in items.slice(
pagination.list.start,
pagination.list.limit
)"
:key="item.id"
class="list-item"
>
{{ item.label }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "App",
data: () => ({
layout: "list",
pagination: {
grid: {
limit: 12,
start: 0,
},
list: {
limit: 8,
start: 0,
},
},
items: [
{ id: 1, imageSrc: "https://ur-img-url", label: "lorem ipsum1" },
{ id: 2, imageSrc: "https://ur-img-url", label: "lorem ipsum2" },
{ id: 3, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
{ id: 4, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
{ id: 5, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
{ id: 6, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
{ id: 7, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
{ id: 8, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
{ id: 9, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
{ id: 10, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
{ id: 11, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
{ id: 12, imageSrc: "https://ur-img-url", label: "lorem ipsum3" },
],
}),
};
</script>

您需要使用pagination数据start和limit。 就像在网格视图内的第二页上一样，您在start: 12上，limit: 24简单，两者都是+12