Perulangan Di Vue Js
Tags: tutorial, vue, javascript
Published: 2022-01-10 16:07:21

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

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

atau jika menggunakan struktur vue akan seperti ini.

```javascript
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

```html
<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.

```html
{{ nama }}
```

![Perulangan Di Vue Js 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z6sz5f2o4hjkjd810pc.png)


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

```html
<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.


![Perulangan Di Vue Js 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apwcf4fza4285ull7m2i.png)

##### Menampilkan data object

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

Jika kita punya data seperti dibawah ini.

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

Kode template sama saja

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

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

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

Maka akan mendapatkan hasil seperti dibawah ini.


![Perulangan Di Vue Js 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nde4w1cmadaui1oem63u.png)

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

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


![Perulangan Di Vue Js 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf3e6h9chupgw16l86sv.png)

##### 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.

```javascript
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.

```html
<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 :
```html
<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.

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

Maka kode htmlnya bisa seperti dibawah ini.

```html
<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.