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>