I know how to get all the data from the json server, but now I would like to know if there is a way to call a certain number of say products, because I want to add a button when the user clicks on it and then make another call and display a few more products on the page...I am using Vue, and this is just an exercise project and i am only creating view, so thats why i am using json server
<template>
<div v-for="product in products" :key="product.name">
<Product :product="product" />
</div>
</template>
<script>
data() {
return {
products: []
}
},
async created() {
try{
const response = await axios.get('http://localhost:3000/products')
this.products = response.data
} catch(err) {
console.log(err)
}
}
</script>
CodePudding user response:
You can use the _limit
and _page
query parameters in your route.
// Get products 1-10
const response = await axios.get('http://localhost:3000/products?_limit=10&_page=1')
// Get products 11-20
const response = await axios.get('http://localhost:3000/products?_limit=10&_page=2')
// Get products 31-45
const response = await axios.get('http://localhost:3000/products?_limit=15&_page=3')