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

I'm trying to implement a show more button to my code. but i don't know how to do it in vue, have been search for the solution but still not find it. At default it's supose to display 9 item and when click "show more" it will show the rest of the items

import { ref } from "vue";

const card = 9;
const step = 5;

function visibleCard() {
  return this.cards.slice(0, this.cardVisible);
}

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"},
]);

<div  v-for="card in cards.slice(0, this.limit)">
  <button @click="cardVisible  = step" v-if="cardVisible < cards.length">
    Show more
  </button>
</div>

CodePudding user response：

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
}

CodePudding user response：

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  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);
});