Membuat List di Vue

Sekarang aku akan menjelaskan cara membuat list di Vue. Sebenarnya kita sudah membahas ini pada materi directive. Tapi pada materi ini akan ada beberapa tambahan penjelasan tentang list. Seperti contoh sebelumnya, kita bisa membuat list menggunakan directive v-for. Di sini caranya juga sama. Untuk lebih jelasnya perhatikan contoh berikut.

<script setup lang="ts">
  const todos: {id: number, task: string, isDone: boolean}[] = [
    {
      id: 1,
      task: "Belajar Vue",
      isDone: false
    },
    {
      id: 2,
      task: "Belajar Composition Vue",
      isDone: true
    },
    {
      id: 3,
      task: "Belajar Style Vue",
      isDone: false
    }
  ];
</script>

<template>
  <ul v-for="todo in todos">
    <li v-for="value in todo">{{value}}</li>
  </ul>
</template>

<style scoped>

</style>

Pada contoh di atas, kita membuat array of object yang berisi object todo. Objectnya memiliki attribute id, task dan isDone. Kita menampilkan todo dengan melakukan iterasi terhadap item dalam array terlebih dahulu kemudian mengiterasi attribute dari object. Tampilan dari contoh di atas adalah sebagai berikut:

Nah, sekarang bagaimana jika kita ingin menampilkan hanya todo yang belum selesai saja? Sebenarnya ada 2 cara, yaitu menggunakan v-show atau menggunakan v-if. Berikut ini adalah tampilan template jika kita menggunakan v-show.

<template>
  <ul v-for="todo in todos">
    <li v-show="!todo.isDone" v-for="value in todo">{{value}}</li>
  </ul>
</template>

Pada contoh di atas, v-show=”!todo.isDone” yang artinya jika nilai dari todo.isDone adalah true, maka list tidak ditampilkan. Kita juga bisa menggunakan v-if dengan value yang sama sehingga kode di template akan menjadi seperti ini.

<template>
  <ul v-for="todo in todos">
    <li v-if="!todo.isDone" v-for="value in todo">{{value}}</li>
  </ul>
</template>

Jika dilihat, kedua kode di atas sama saja. Tapi ternyata ada perbedaan di keduanya. Penggunaan v-show akan membuat li tetap dirender namun dengan attribute style=”display: none”, sedangkan jika kita menggunakan v-if maka li yang tidak memenuhi kondisi tidak akan di-render.

Prioritas Directive

Perhatikan contoh sebelumnya pada <li> yang menggunakan 2 directive dalam satu elemen, yaitu v-if dan v-for. Nah, jika seperti itu, sebenarnya yang akan dipanggil terlebih dahulu adalah v-if baru memanggil v-for. Perhatikan contoh sederhana berikut ini.

<script setup lang="ts">
  const values: number[] = [1, 2, 3];
</script>

<template>
  <ul>
    <li v-for="v in values" v-if="v < 3">{{v}}</li>
  </ul>
</template>

<style scoped></style>

Pada contoh di atas, kita punya values yang merupakan array of number yang isinya 1,2,3. Kita ingin membuat list di vue untuk menampilkan item array yang nilainya kurang dari 3. Cara di atas tidak akan berhasil meskipun kelihatannya logikanya sudah benar. Kode di atas akan membaca v-if terlebih dahulu baru membaca v-for. Perbaikan untuk kode di atas adalah sebagai berikut:

<template>
  <ul v-for="todo in todos">
    <li v-for="value in todo">{{value}}</li>
  </ul>

  <ul>
    <template v-for="v in value">
      <li v-if="v < 3">{{v}}</li>
    </template>
  </ul>
</template>

Perhatikan, pada contoh di atas, kita menggunakan v-for pada <template>, selanjutnya melakukan pengecakan v-if pada <li>. <template> tidak akan dirender menjadi html ya.

Proses Rendering saat Membuat List di Vue

Ketika kita membuat list di vue dan melakukan perubahan data, maka secara otomatis semua list akan dirender ulang. Misal kita punya array yang itemnya ada 100 dan kita buat list-nya, maka saat kita merubah 1 item saja maka ke-100 list itu akan dirender ulang. Tentunya hal ini akan membuat proses rendering menjadi lambat. Tapi tenang saja, vue sudah memiliki solusi untuk masalah ini. Caranya, kita bisa menambahkan key pada element yang menggunakan v-for. Berikut ini contohnya

<template>
  <ul>
    <template v-for="todo in todos" :key="todo.id">
      <li>{{todo.task}} <span :class="{green:todo.isDone, red:!todo.isDone}">{{todo.isDone}}</span></li>
    </template>
  </ul>
</template>

<style scoped>
.green {
  color: green;
}

.red {
  color: red;
}
</style>

Pada contoh di atas, kita tambahkan value :key yang mengambil dari nilai todo.id. Dengan begitu render ulang hanya akan dilakukan jika ada perubahan. Jika tidak ada, perubahan maka tidak akan dirender ulang. Sayangnya hal ini sulit dilihat. Karena proses render sangatlah cepat.

Nah, demikianlah sedikit penjelasan cara membuat list di Vue. Semoga tulisan ini bermanfaat untuk kita semuanya. 🤲