[Vuejs]-How do i get "show more" button to show the rest of array item/component

by

-1👍

✅

You can create a computed function that takes care of slicing the data. You also need a variable to set the total length.

Another note is that you have "show more" button inside the v-for loop. I am not sure if this is the intended behaviour as it will create a button for each item. I think you want to create a button for the whole group.

Here is your code with the modification:

<template>
  <div class="collaps" v-for="card in getCards">
    <div>{{ card }}</div>
  </div>

  <button
    @click="currentStep = currentStep + stepBy"
    v-if="currentStep < total"
  >
    Show more
  </button>
</template>

and js:

<script setup>
import { ref, computed } from 'vue';
const stepBy = 5;

const currentStep = ref(5);
const total = ref(9);

const cards = ref([
  { key: 1, judul: 'Frontend' },
  { key: 2, judul: 'Backend' },
  { key: 3, judul: 'UI/UX' },
  { key: 4, judul: 'Product Manager' },
  { key: 5, judul: 'Product Manager' },
  { key: 6, judul: 'test1' },
  { key: 7, judul: 'test2' },
  { key: 8, judul: 'test3' },
  { key: 9, judul: 'test3' },
]);

const getCards = computed(() => {
  return cards.value.slice(0, currentStep.value);
});

0👍

Add this code to your method

showless() {
this.limit = 9
}
edit your buttons
<button @click="showless" v-if="(this.limit === this.cards.length - 1)">showless</button>
<button @click="showmore" v-else>show more</button>

-1👍

add this line,

const limit = 9;

edit these lines

v-for="card in cards.slice(0, this.limit)"

<button @click="showMore">show more </button>

add this function to method

showMore() {
    this.limit = this.cards.length - 1
}

Leave a comment