如何显示最多包含10个项目的Vue / Nuxt数组和一个用于拉入更多项目的按钮？

问题描述

我正在创建一个页面，该页面使用javascript / vue / nuxt从一个数组中列出10个数据项，其中包括一个带有props的javascript数组。该页面是包含一些信息的网站列表。目前，该页面显示的数据很好，但是我想知道是否有一种方法可以显示每页最多10个项目，并从单个文件中提取所有数据，而不是直接将其写入页面？

我希望页面显示数组中的10个项目，当有人单击按钮时，它将显示接下来的10个项目，依此类推。我还需要第二个按钮，使您可以返回到前10个列表。最好的方法是什么？

网站列表页面：

<template>
  <div>
    <div class="websites-container">
      <website
        logo="/images/logos/example.jpg"
        link="hwww.example.com"
        name="Website Name"
        description="This is one website"
      />
    </div>
  </div>
</template>

数组“网站”代码：

<template>
  <div class="box-container">
    <div class="flex-container">
      <div class="logo">
        <img :src="logo" :href="link" target="_blank">
      </div>
    </div>
    <div class="flex-container">
      <h3 v-text="name" />
      <a v-show="info" class="info" :href="infolink" v-text="info" />
    </div>
    <div>
      <p v-show="description" class="description" v-text="description" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    logo: {
      type: String,required: true
    },link: {
      type: String,name: {
      type: String,info: {
      type: String,default: ''
    },infolink: {
      type: String,description: {
      type: String,default: ''
    }
  }
}
</script>

解决方法

如果要对数组进行分页，建议创建一个使用Array.prototype.slice()

的计算属性

例如

data: () => ({
  page: 1,pageSize: 10,list: [{
    logo: "/images/logos/example.jpg",link: "https://www.example.com",name: "Website Name",description: "This is one website"
  },{
    // etc
  }]
}),computed: {
  currentPage () {
    return this.list.slice((this.page - 1) * this.pageSize,this.page * this.pageSize)
  },totalPages () {
    return Math.ceil(this.list.length / this.pageSize)
  }
},methods: {
  nextPage () {
    this.page = Math.min(page + 1,totalPages)
  },prevPage () {
    this.page = Math.max(page - 1,1)
  }
}

然后您要做的就是让您的 next 和 previous 按钮递增或递减page

<div class="websites-container">
  <website
    v-for="website in list"
    :key="website.link"
    :logo="website.logo"
    :link="website.link"
    :name="website.name"
    :description="website.description"
  />
</div>
<div>
  <button type="button" @click="nextPage">Next</button>
  <button type="button" @click="prevPage">Previous</button>
</div>