Menampilkan Data Array dan Object pada Vue.js

Data dalam bentuk list atau daftar yang bisa berupa array , objek atau collection (array dari objek) bisa kita tampilkan dengan mudah menggunakan Vue.

Menampilkan Data Array

Misalkan kita memiliki data sebagai berikut :

books: [
    'C++ High Performance',
    'Mastering Linux Security and Hardening', 'Python Programming
    Blueprints ',
    'Mastering PostgreSQL 10'
]

atau lengkapnya bisa kita lihat seperti ini

var vm = new Vue({
    el: '#app',
    data: {
        books: [
            'C++ High Performance',
            'Mastering Linux Security and Hardening',
            'Python Programming Blueprints',
            'Mastering PostgreSQL 10'
        ]
    }
})

Data tersebut ingin kita tampilkan menggunakan tag HTML list (li). Maka pada template Vue kita cukup mendefinisikannya sebagai berikut.

<div id="app">
   <ul>
      <li v-for="book in books">
         {{ book }}
      </li>
   </ul>
</div>

v-for Menggunakan Index 

Index dari suatu array yang kita tampilkan melalui v-for bisa kita gunakan dengan menambahkan argumen kedua sebagai berikut

<li v-for="(book, index) in books">
{{ index+1 }}. {{ book }}
</li>

Menampilkan Data Objek 

Sebagaimana array, data objek juga bisa kita tampilkan menggunakan directive v-for

  book: {
    id: 99,
    title: 'C++ High Performance',
    description: 'Write code that scales across CPU registers, multi-core,
    and machine clusters ',
    authors: 'Viktor Sehr, Björn Andrist',
    publish_year: 2018,
    price: 100000,
}
  

Adapun kode untuk templatenya sebagai berikut.

 <li v-for="value of book">
{{ value }}
</li>
   

Kita juga bisa menambahkan argumen kedua untuk key, seperti berikut.

<li v-for="(value, key) of book">
{{ key }} : {{ value }}
</li>
   

v-for Menggunakan Index 

Adapun argumen ketiga yang bisa kita tambahkan akan menjadi index dari objek tersebut.

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