无法为网格12项和列表8项分配项

Question

layout: false,
computed: {
rows() {
return this.productsList.length;
},
paginatedItems() {
return this.productsList.slice(
this.currentPage * this.perPage,
(this.currentPage + 1) * this.perPage
);
},
},
methods: {
layoutchange() {
this.layout = !this.layout;
if (this.layout === true) {
} else {

}
},

<div class="bar">
<!-- These two buttons switch the layout variable,
which causes the correct UL to be shown. -->
<a class="list-icon" v-bind:class="{ active: layout == false }" v-on:click="layoutchange"></a>
<a class="grid-icon" v-bind:class="{ active: layout == true }" v-on:click="layoutchange"></a>
</div>
<ul v-if="layout == true">
<div class="overflow-auto1">
<div class="listview-plp" v-for="product in paginatedItems" :key="product.key" id="product" :items="productsList" :per-page="perPage" :current-page="currentPage" </div>
</div>
</ul>
<ul v-if="layout == false" class="grid-view">
<div class="overflow-auto">
<div class="product-plp1" v-for="product in paginatedItems" :key="product.key" id="product" :items="productsList" :per-page="perPage" :current-page="currentPage">
</div>
</div>
</ul>

无法为网格12项和列表8项分配项。不知道如何开始。

但在ul标记中，我认为我需要分配一些条件，并将其传递给computed属性。

你能帮我一下吗。感谢

Answer 1

您需要在layoutChange:中设置this.perPage

perPage: 12,
layout: false,
computed: {
rows() {
return this.productsList.length;
},
paginatedItems() {
return this.productsList.slice(
this.currentPage * this.perPage,
(this.currentPage + 1) * this.perPage
);
},
},
methods: {
layoutchange() {
this.layout = !this.layout;
// If layout == true in grid-mode switch the numbers around
this.perPage = this.layout ? 8 : 12;
}
}