Memahami Dan Menggunakan Directive v-for Pada Vue Js
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com
13 November 2017

Vue Js merupakan salah satu dari banyak framework JavaSrcipt yang membantu para Front-End developer dalam mengembangkan sebuah project.

Vue Js mempunyai banyak directive, seperti v-model, v-html, v-show, v-class dan masih banyak lagi, pada tutorial kali ini kita akan membahas salah satu directive di Vue Js untuk menampilkan data dengan melakukan perulangan atau loop dari sutau nilai array maupun objek, directive tersebut yaitu v-for.

Langsung saja, buat sebuah folder project baru di htdocs (jika menggunakan xampp) dengan nama misalkan “belajar-vue-js”.

Kemudian buatlah sebuah file index.html di folder project tersebut, kemudian tuliskan kodenya seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Todolist Vue Js</title>
</head>
<body>

<!-- inisialisasi el Vue Js -->
    <div id="app">
        <h1 style="text-align: center;">{{ title }}</h1><br/>

        <!-- render table -->
        <div v-for="book in books">
            {{ book.title }}</br>
            {{ book.author }}</br>
            {{ book.harga }}</br>
            <hr/>
        </div>
        <!-- end render table -->
    </div>

<!-- use resources Vue Js Online -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<!-- file app.js -->
<script type="text/javascript" src="app.js"></script>
</body>
</html>

Selanjutnya buat file baru dengan nama app.js di dalam folder project dan tuliskan kode berikut ini:

var app = new Vue({

        el: '#app',

        data: {
                title: 'Belajar Vue Js',
                books: [
                {
                    title : 'Belajar Angular Js',
                    author: 'Fika Ridaul Maulayya',
                    harga : '70.000'
                },
                {
                    title : 'Belajar Framework JavaScript',
                    author: 'Rizqi Maulana',
                    harga : '120.000'
                },
                {
                    title : 'Belajar Ruby on Rails',
                    author: 'Faisal Mahadi',
                    harga : '89.000'
                },
            ]
        }
    })

Selanjutnya, coba jalankan aplikasi kita dengan mengetikan http://localhost/belajar-vue-js, di address bar broswer, maka kurang lebih tampilanya akan seperti berikut ini:

Blog ini telah dibaca sebanyak 915 kali
JavaScript Framework JS Vue Js V-For Loop Foreach Array Array Object JSON API

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus
Tidak ada blog terkait.