How to Load More Data on a Button Click Using Vue js 3
1 year ago
admin
Vuejs
In today's lesson, we will see how to load more data on a button click using vue js 3, let's assume that we have an e-commerce website and we want to display only two products and the user can load more products on a button click, so let's see how we can do that.
Load more data on a button click
So in the example below, we display only 2 products from the array, and once the user clicks on the button the method load more is triggered and the products to show are incremented by 2.
<template>
<div className='row my-4'>
<div class="col-md-4 mb-2" v-for="product in data.products.slice(0, data.productToShow)" :key="product.id">
<div class="card" style="width: '18rem'">
<img :src="product.image" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">{{product.name}}</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button
class="btn btn-primary">
<i class="bi bi-cart-check"></i> add to cart
</button>
</div>
</div>
</div>
<div class="col-md-12 d-flex justify-content-center my-5">
<button v-if="data.productToShow < data.products.length"
@click="loadMoreProducts"
class="btn btn-sm btn-danger">
Load more
</button>
</div>
</div>
</template>
<script setup>
import { reactive } from 'vue';
const data = reactive({
products: [
{
id: 1,
name: 'Iphone 12',
price: 700,
image: 'https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202__480.jpg'
},
{
id: 2,
name: 'Samsung s10',
price: 400,
image: 'https://cdn.pixabay.com/photo/2016/03/27/19/43/samsung-1283938__340.jpg'
},
{
id: 3,
name: 'Samsung Tv',
price: 1200,
image: 'https://cdn.pixabay.com/photo/2019/06/30/18/19/tv-4308538__480.jpg'
},
{
id: 4,
name: 'Huwawei Mate',
price: 900,
image: 'https://cdn.pixabay.com/photo/2017/08/11/14/19/honor-2631271__340.jpg'
}
],
productToShow: 2
});
const loadMoreProducts = () => {
if(data.productToShow >= data.products.length){
return;
}else{
data.productToShow = data.productToShow + 2;
}
}
</script>
<style>
</style>