javascript - 无法为网格 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 标签中，我认为我需要分配一些条件，并将其传递给计算属性才能做到这一点。

你能帮我解决这个问题吗？谢谢

标签： javascriptvue.js

Answer 1

您需要this.perPage设置layoutChange：

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;
  }
}