const app = {
data() {
return {
info: [], // 存儲題目詳情數組
currentPage: 1, // 當前頁碼
pageSize: 3, // 每頁顯示的題目數量
sjid: sjid
};
},
methods: {
fetchData(page = 1) {
axios
.get('/api/shijuan/timu_list.html', {
params:{
p: page,
limit: this.pageSize,
sjid: this.sjid
}
})
.then(response => {
this.info = response.data.data;
this.p = response.data.p;
})
.catch(error => {
console.error('Error fetching data:', error);
});
},
handlePageChange(page) {
if (page >= 1) {
this.currentPage = page;
this.fetchData(page);
}
}
},
mounted() {
this.fetchData(this.currentPage);
}
};
Vue.createApp(app).mount('#app');
<div>
<button @click="handlePageChange(currentPage - 1)" :disabled="currentPage <= 1">上一頁</button>
<span>當前頁: {{ currentPage }}</span>
<button @click="handlePageChange(currentPage + 1)">下一頁</button>
</div>