VUE下一页功能怎么实现

<template>    <div>      <ul>        <li>{{ item.name }}</li>      </ul>      <button>下一页</button>    </div>  </template>    <script>  export default {    data() {      return {        currentPage: 1, // 当前页码        pageSize: 10, // 每页显示的数量        totalData: [], // 总数据        currentPageData: [] // 当前页数据      };    },    computed: {      totalPages() {        return Math.ceil(this.totalData.length / this.pageSize); // 总页数      }    },    methods: {      fetchData() {        // 向后端发送请求获取数据，并将数据存储在totalData中        axios.get(&#39;/api/data&#39;, {          params: {            page: this.currentPage,            size: this.pageSize          }        }).then(response => {          this.totalData = response.data;          this.currentPageData = response.data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);        });      },      nextPage() {        if (this.currentPage < this.totalPages) {          this.currentPage++; // 更新当前页码          this.fetchData(); // 重新获取数据        }      }    },    mounted() {      this.fetchData(); // 在组件挂载时获取数据    }  };  </script>