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>

Popular Tutorials

Related Tutorials

Review App Using Laravel 11 & Vue js 3 Composition API Part 5

In the last part of this tutorial, we will display the reviews list of each product, add the ability...


Review App Using Laravel 11 & Vue js 3 Composition API Part 4

In the fourth part of this tutorial, we will fetch and display all the products on the home page, vi...


Review App Using Laravel 11 & Vue js 3 Composition API Part 3

In the third part of this tutorial, we will start coding the front end, first, we will install the p...


Review App Using Laravel 11 & Vue js 3 Composition API Part 2

In the second part of this tutorial, we will create the product and review controllers, and later we...


Review App Using Laravel 11 & Vue js 3 Composition API Part 1

In this tutorial, we will create a review app using Laravel 11 & Vue js 3 Composition API, the user...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 5

In the final part of this tutorial, we will display the cart items, add the ability to increment/dec...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 4

In the fourth part of this tutorial, we will fetch and display all the products, and add the store w...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 3

In the third part of this tutorial, we will move to the front end, we will install the packages...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 2

In the second part of this tutorial, we will create the product and order controllers, add the...


Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 1

In this tutorial, we will create a shopping cart using vue js 3 composition API Laravel 11 and strip...