Perulangan Di Vue Js

Tutorial kali ini akan membahas bagaimana menggunakan perulangan di vue.

Untuk melakukan ini di vue kita menggunakan directive v-for.

Menampilkan data array

Misalnya kita punya data array nama-nama siswa

siswa: ["budi","andi","caca"]

atau jika menggunakan struktur vue akan seperti ini.

export default {
  name: "App",
  data: () => {
    return {
      siswa: ["budi","andi","caca"]
    };
  }
};

Data tersebut akan kita tampilkan menggunakan v-for.Maka template vue nya akan menjadi seperti ini

<ul>
  <li v-for="nama in siswa">
  {{ nama }}
  </li>
</ul>

Kita menggunakan html list untuk menampilkan nama siswa.Bisa dilihat kita melakukan perulangan dengan variable siswa dan nama sebagai alias untuk item satuan.Kemudian karena ini hanya array kita langsung mencetak dengan seperti dibawah ini.

{{ nama }}

Kita juga bisa menampilkan index dari masing-masing data tersebut dengan menambahkan kode seperti dibawah.

<ul>
  <li v-for="(nama,index) in siswa">
   {{index+1}}.{{ nama }}
  </li>
</ul>

Index diawali dari 0 jadi kita menambah 1 ketika mencetak.Maka akan keluar hasil seperti dibawah ini.

Menampilkan data object

Sebenarnya cara sama saja menampilkan data object ataupun array dengan v-for

Jika kita punya data seperti dibawah ini.

siswa : {
  nama:'budi',
  kelas:'XII-A',
  jurusan:'RPL'
}

Kode template sama saja

<ul>
  <li v-for="value in siswa">
   {{ value }}
  </li>
</ul>

Kita juga bisa menampilkan key dari object sebagimana index dari array sebelumnya.

<ul>
  <li v-for="(value,key) in siswa">
   {{key}} : {{ value }}
  </li>
</ul>

Maka akan mendapatkan hasil seperti dibawah ini.

Di object kita bisa menambahkan satu parameter lagi yaitu index sehingga menjadi seperti ini.

<ul>
  <li v-for="(value,key,index) in siswa">
    {{index+1}}. {{key}} : {{ value }}
  </li>
</ul>

Menampilkan Data Collection

Jika kita mendapatkan data dari api backend,seringkali data yang didapatkan berbentuk collection atau array object atau berformat data JSON.

Misalnya seperti data dibawah.

siswa : [
   {
    nama:'budi',
    kelas:'XII-A',
    jurusan:'RPL'
   },
   {
    nama:'andi',
    kelas:'XII-B',
    jurusan:'TKJ'
   },
   {
    nama:'caca',
    kelas:'XII-A',
    jurusan:'RPL'
    }
 ]

Kita akan menampilkan kedalam html tabel.Maka kode v-for untuk table kurang lebih seperti dibawah ini.

<table border="1">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
    <th>Jurusan</th>
  </tr>
  <tr v-for="(data,index) in siswa">
    <td>{{index+1}}</td>
    <td>{{data.nama}}</td>
    <td>{{data.kelas}}</td>
    <td>{{data.jurusan}}</td>        
  </tr>
</table>

Kenapa kita meletakkan v-for di tr,karena tr lah yang akan kita looping sebanyak data siswa.data.nama berarti kita memanggil key nama dari variabel data yang sudah jadi objek dari perulangan siswa.

Attribut v-bind:key

Attribut ini bisa juga dipanggil hanya dengan :key.Jika kita menggunakan v-for maka vue menyarankan kita harus menggunakan attribute ini,di IDE apalagi yang menggunakan syntax linter ,akan menunjukan warning di baris kodenya jika kita tidak menambahkan key saat pakai v-for.Attribute ini berperan sebagai penanda unik ,kayak primary key lah kalau di database,agar vue bisa melakukan tracking perubahan setiap tag html saat dirender.

Asal dari :key ini bisa dari index dari array,key atau properti dari object.

Contohnya :

<ul>
  <li v-for="(value,index) in siswa" v-bind:key="index">
   {{index+1}}. {{ value }}
  </li>
</ul>

atau jika kita punya object yang memiliki attribute unik.

siswa : [
   {
    id:1,
    nama:'budi'
   },
   {
    id:2,
    nama:'andi'
   }
]

Maka kode htmlnya bisa seperti dibawah ini.

<ul>
  <li v-for="(data,index) in siswa" v-bind:key="data.id">
   {{index+1}}. {{ data.nama }}
  </li>
</ul>

Sampai sini dulu pembahasan mengenai penggunaan v-for,silahkan bertanya dibawah jika ada yang kurang dimengerti.