在 div v-for (Vuejs) 中添加分页

Question

我想在我的 div v-for 循环中添加分页。它已经显示了我的数据。但是它仍然不是分页。谁能推荐我为此使用什么分页？我希望该项目每页只显示 5 个，但我不确定我应该使用哪个分页。我使用 b 分页，但它不起作用。谢谢。

这是代码：

https://codesandbox.io/s/suspicious-ramanujan-756zs?file=/src/App.vue

App.vue

<template>
  <div id="app">
    <div class="columns is-multiline is-mobile">
      <div class="column is-half" v-for="(p, index) in sample" :key="index">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img :src="p.image" alt="Placeholder image" />
            </figure>
          </div>
          <div class="card-content">{{ p.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

export default {
  name: "App",
  data() {
    return {
      sample: [
        {
          description: "Lady with a red umbrella",
          image: "https://i.imgur.com/pwpWaWu.jpg",
        },
        {
          description: "Flowers and some fruits",
          image: "https://i.imgur.com/KIPtISY.jpg",
        },
        {
          description: "Beautiful scenery",
          image: "https://i.imgur.com/2jMCqQ2.jpg",
        },
        {
          description: "Some kind of bird",
          image: "https://i.imgur.com/QFDRuAh.jpg",
        },
        {
          description: "The attack of dragons",
          image: "https://i.imgur.com/8yIIokW.jpg",
        },

        //2nd page

        {
          description: "Lady with a red umbrella",
          image: "https://i.imgur.com/pwpWaWu.jpg",
        },
        {
          description: "Flowers and some fruits",
          image: "https://i.imgur.com/KIPtISY.jpg",
        },
        {
          description: "Beautiful scenery",
          image: "https://i.imgur.com/2jMCqQ2.jpg",
        },
        {
          description: "Some kind of bird",
          image: "https://i.imgur.com/QFDRuAh.jpg",
        },
        {
          description: "The attack of dragons",
          image: "https://i.imgur.com/8yIIokW.jpg",
        },
      ],
    };
  },
};

Answer 1

您可以使用v-page 包进行分页。在codesandbox 中实现：

<template>
  <div id="app">
    <div class="columns is-multiline is-mobile">
      <div class="column is-half" v-for="(p, index) in pageArr" :key="index">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img :src="p.image" alt="Placeholder image" />
            </figure>
          </div>
          <div class="card-content">{{ p.description }}</div>
        </div>
      </div>
    </div>
    <v-page
      :total-row="arr.length"
      align="left"
      v-model="current"
      @page-change="pagePhotoChange"
      :page-size-menu="[5, 10]"
    ></v-page>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      pageArr: [],
      current: 0,
      arr: [
        {
          description: "Lady with a red umbrella",
          image: "https://i.imgur.com/pwpWaWu.jpg",
        },
        {
          description: "Flowers and some fruits",
          image: "https://i.imgur.com/KIPtISY.jpg",
        },
        {
          description: "Beautiful scenery",
          image: "https://i.imgur.com/2jMCqQ2.jpg",
        },
        {
          description: "Some kind of bird",
          image: "https://i.imgur.com/QFDRuAh.jpg",
        },
        {
          description: "The attack of dragons",
          image: "https://i.imgur.com/8yIIokW.jpg",
        },

        //2nd page

        {
          description: "Lady with a red umbrella",
          image: "https://i.imgur.com/pwpWaWu.jpg",
        },
        {
          description: "Flowers and some fruits",
          image: "https://i.imgur.com/KIPtISY.jpg",
        },
        {
          description: "Beautiful scenery",
          image: "https://i.imgur.com/2jMCqQ2.jpg",
        },
        {
          description: "Some kind of bird",
          image: "https://i.imgur.com/QFDRuAh.jpg",
        },
        {
          description: "The attack of dragons",
          image: "https://i.imgur.com/8yIIokW.jpg",
        },

        // 3rd page

        {
          description: "Lady with a red umbrella",
          image: "https://i.imgur.com/pwpWaWu.jpg",
        },
        {
          description: "Flowers and some fruits",
          image: "https://i.imgur.com/KIPtISY.jpg",
        },
        {
          description: "Beautiful scenery",
          image: "https://i.imgur.com/2jMCqQ2.jpg",
        },
        {
          description: "Some kind of bird",
          image: "https://i.imgur.com/QFDRuAh.jpg",
        },
        {
          description: "The attack of dragons",
          image: "https://i.imgur.com/8yIIokW.jpg",
        },
      ],
    };
  },
  methods: {
    pagePhotoChange(pInfo) {
      this.pageArr.splice(0, this.pageArr.length);
      let start = 0,
        end = 0;
      start = pInfo.pageSize * (pInfo.pageNumber - 1);
      end = start + pInfo.pageSize;
      if (end > this.arr.length) end = this.arr.length;
      for (let i = start; i < end; i++) {
        this.pageArr.push(this.arr[i]);
      }
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>