分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了无法为网格 12 项和列表 8 项分配项目？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决无法为网格 12 项和列表 8 项分配项目？？

开发过程中遇到无法为网格 12 项和列表 8 项分配项目？的问题如何解决？下面主要结合日常开发的经验，给出你关于无法为网格 12 项和列表 8 项分配项目？的解决方法建议，希望对你解决无法为网格 12 项和列表 8 项分配项目？有所启发或帮助；

@H_502_4@

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

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

解决方法

您需要在 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;
  }
}