snippet: simple loadmore logic

loadmore.vue

<script setup>
const db_teachers = ref([
  {
    id: 1,
    name: 'John Doe',
    subject: 'Math'
  },
  {
    id: 2,
    name: 'Jane Doe',
    subject: 'English'
  },
  {
    id: 3,
    name: 'Doe John',
    subject: 'Science'
  }, 
  {
    id: 4,
    name: 'Doe Jane',
    subject: 'History'
  },
  {
    id: 5,
    name: 'John Smith',
    subject: 'Physics'
  },
  {
    id: 6,
    name: 'Jane Smith',
    subject: 'Chemistry'
  },
  {
    id: 7,
    name: 'Smith John',
    subject: 'Biology'
  },
  {
    id: 8,
    name: 'Smith Jane',
    subject: 'Geography'
  },
  {
    id: 9,
    name: 'John Doe',
    subject: 'Math'
  },
  {
    id: 10,
    name: 'Jane Doe',
    subject: 'English'
  },
  {
    id: 11,
    name: 'Doe John',
    subject: 'Science'
  }, 
  {
    id: 12,
    name: 'Doe Jane',
    subject: 'History'
  },
  {
    id: 13,
    name: 'John Smith',
    subject: 'Physics'
  },
  {
    id: 14,
    name: 'Jane Smith',
    subject: 'Chemistry'
  },
  {
    id: 15,
    name: 'Smith John',
    subject: 'Biology'
  },
  {
    id: 16,
    name: 'Smith Jane',
    subject: 'Geography'
  },
  {
    id: 17,
    name: 'John Doe',
    subject: 'Math'
  },
  {
    id: 18,
    name: 'Jane Doe',
    subject: 'English'
  },
  {
    id: 19,
    name: 'Doe John',
    subject: 'Science'
  }, 
  {
    id: 20,
    name: 'Doe Jane',
    subject: 'History'
  },
  {
    id: 21,
    name: 'John Smith',
    subject: 'Physics'
  },
  {
    id: 22,
    name: 'Jane Smith',
    subject: 'Chemistry'
  },
  {
    id: 23,
    name: 'Smith John',
    subject: 'Biology'
  },
  {
    id: 24,
    name: 'Smith Jane',
    subject: 'Geography'
  },
  {
    id: 25,
    name: 'John Doe',
    subject: 'Math'
  },
]);

// ambil 5 data teachers awal
const teachers = ref([...db_teachers.value.slice(0, 5)]);

const limitStart = ref(teachers.value.length); // batas awal pengambilan data
const limitEnd = ref(limitStart.value + 5); // batas akhir pengambilan data

// fungsi memuat data baru dari db_teachers
const loadmore = () => {
  // data lama di teachers digabung dengan 5 data dari db_teachers selanjutnya
  teachers.value = [...teachers.value, ...db_teachers.value.slice(limitStart.value, limitEnd.value)];
  
  // ubah limitStart dan limitEnd untuk data seterusnya
  limitStart.value = limitEnd.value;
  limitEnd.value = limitEnd.value + 5;
}
</script>

<template>
  <div>
    <ul>
      <li v-for="teacher in teachers" :key="teacher.id">
        {{ teacher.name }} - {{ teacher.subject }}
      </li>
    </ul>
    <button @click="loadmore">loadmore</button>
  </div>
</template>