How To Use The Load More Items Button For Vue.js
Use Vue.js Load More Items Button. Without Any npm Plugin And jQuery.
Step 1: Components
<template> <div class="container"> <div class="row justify-content-center text-center"> <div class="col-lg-4 col-md-6" v-for="(item, index) in items" :key="index" > <h1>{{ item.title }}</h1> </div> <div class="col-lg-12"> <button @click="loadMore" class="default-btn"> Load More </button> </div> </div> </div> </template>
Step 2: Script
<script> export default { data() { return { items: [ { id: 1, title: "Item 1", }, { id: 2, title: "Item 2", }, { id: 3, title: "Item 3", }, { id: 4, title: "Item 4", }, { id: 5, title: "Item 5", }, { id: 6, title: "Item 6", }, { id: 7, title: "Item 7", }, { id: 8, title: "Item 8", }, { id: 9, title: "Item 9", }, { id: 10, title: "Item 10", }, { id: 11, title: "Item 11", }, { id: 12, title: "Item 12", }, ], length: 3, }; }, methods: { loadMore() { if (this.length > this.items.length) return; this.length = this.length + 3; }, }, computed: { items() { return this.items.slice(0, this.length); }, }, }; </script>
Step 3: SCSS
<style lang="scss"> .default-btn { padding: 16px 30px 16px 55px; position: relative; color: #ffffff; border-radius: 5px; font-weight: 500; font-size: 15px; background-color: #00A9A4; transition: all ease .5s; display: inline-block; border: none; &:focus { box-shadow: unset; } &:hover { background-color: #FF6400; color: #ffffff; } } </style>