Hallo teman ngide! Setelah sebelumnya kita membahas sedikit tentang belajar Vue JS, kali ini kita akan membuat tutorial aplikasi sederhana yaitu membuat todolist dengan menggunakan Vue js.
Apa saja yang perlu kalian siapkan sebelum melanjutkan tutorial ini?
- Download Vue js library untuk yang internetnya lambat. Yang kenceng bisa langsung pakai CDNnya ya..
- Texteditor kesukaan kamu seperti Sublime, VScode, notepad juga ok..
- Kamu sudah mengerti dasar dari vuesjs seperti component, data binding, directive dan juga methods.
Daftar Isi
Jika bahan diatas sudah siap, (kayak masak masak aja ? ) kita akan lanjutkan tutorial ini. Tampilan akhirnya nanti akan seperti gif di bawah ini ya.
1. Buat file index.html
Pertama kita membuat sebuah file baru dengan nama index.html kemudian sisipkan file Vuejs melalui script tag di akhir tag body.
Saya juga insert boostrap css, untuk mempercatik tampilannya.
Kode fullnya seperti di bawah ini.
<html>
<head>
<title>Todo Aps</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="https://unpkg.com/vue"></script>
</html>
2. Buat file app.js
File app.js berfungsi untuk menampung semua script-script javascript yang akan kita pakai untuk membuat todolist. Pertama kita buat instance Vue di dalam app.js
var app = new Vue({
el: '#app',
data: {
'message': 'Hello world'
},
});
Sisipkan file app.js di dalam index.html dengan menambahkan kode di setelah script VusJs:
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="app.js"></script>
Sekarang coba kalian buka file index.html di browser. Jika tidak ada masalah maka kamu akan mendapatkan tampilan sebuah text “Hello world”.
3. Membuat component todo
Selanjutnya kita akan membuat sebuah component baru untuk menampilkan todolist. Kita akan namai component tersebut dengan nama dengan todo.
Tambahkan kode di bawah ini di dalam file app.js
Vue.component('todo',{
template: '<div class="container">'+
'<div class="row justify-content-center">'+
'<div class="col-md-6">'+
'<h1 class="text-center">Todolist</h1>'+
'<hr>'+
'<input type="text" class="form-control" placeholder="Input todolist & enter" v-model="todo.name" >'+
'<hr>'+
'<ul class="list-group">'+
'<li class="list-item" v-for="item in todos">{{ item.name }}</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>',
data: function(){
return {
todos: [
{
name: 'Todo 1',
done: true,
},
{
name: 'Todo 2',
done: false,
},
{
name: 'Todo 3',
done: false,
},
],
todo: {
name: '',
done: false
}
}
},
});
Edit file index.html, tambahkan component todo yang sudah dibuat sebelumnya di dalam div dengan id app
...
<div id="app">
<todo></todo>
</div
...
Simpan file index.html tersebut dan coba buka lagi di browser kamu. Jika tidak terjadi error, maka kamu akan mendapatkan tampilan seperti berikut ini:
Sedikit penjelasan dari component todo diatas adalah aplikasi todolist ini memiliki sebuah data todos yang berfungsi untuk menampung semua data dari item todolist tersebut.
Kemudian kita menggunakan directive v-for untuk melakukan perulangan dan menampilkan masing-masing item todolist ke dalam view.
Sampai disini ada pertanyan? ?
4. Menambah item todolist
Untuk menambah item ke dalam list todos, kita akan memanfaatkan sebuah text input yang menerima judul dari todolist item dan ketika user menekan enter maka item tersebut akan di simpan kedalam todolist dan di tampilkan ke dalam view.
Langkah pertama adalah menambahkan event saat user menekan enter.
Caranya edit template dari component todo di bagian text inputnya menjadi seperti berikut ini:
<input type="text" class="form-control" placeholder="Input todolist & enter" v-model="todo.name" v-on:keyup.enter="addTodo">
Jadi ada tambahan directive v-on:keyup.enter="addTodo", maksudnya adalah saat user menekan enter maka Vue akan memanggil fungsi addTodo.
Selanjutnya tambahkan sebuah method baru dengan nama addTodo di component todo
methods: {
addTodo(){
if(this.todo.name != ''){
this.todos.push(this.todo)
this.todo = {
name: '',
done: false
}
}
},
}
Sedikit penjelasan dari fungsi di atas adalah saat user menekan enter dan nama todo itemnya tidak kosong, maka item todo itu akan ditambahkan ke dalam array todos.
Coba kamu buka file index.html di browser dan coba tambahkan item baru ke dalam todolist yang sudah dibuat.
Jika tidak terdapat error maka kamu bisa mendapatkan tampilan seperti di bawah ini.
5. Membuat component todolist item.
Kita akan membuat sebuah component baru dengan nama todo-item yang berfungsi untuk menampilkan masing-masing item dari todolist tersebut.
Buka file app.js dan tambahkan kode di bawah ini:
Vue.component('todo-item',{
props: ['item'],
template: '<li class="list-group-item" v-bind:style="isActive">{{ item.name }}'+
'<button type="button" class="btn btn-success float-right">'+
'∨'+
'</button>'+
'<button type="button" class="btn btn-danger float-right" aria-label="Close"'+
'<span aria-hidden="true">×</span>'+
'</button>'+
'</li>',
methods: {
},
computed: {
isActive(){
if(this.item.done){
return 'text-decoration:line-through'
}
}
}
});
....
Edit component todo di bagian list item, kita ganti dengan component todo-item yang baru kita buat.
...
'<todo-item v-for="item,index in todos" v-bind:item="item" v-bind:key="index" ></todo-item>'+
...
Coba buka lagi file index.html, seharusnya tampilannya masih seperti sebelumnya.
6. Mengupdate dan menghapus Todolist Item
Fitur selanjutnya yang ingin kita tambahkan yaitu mengupdate dan menghapus masing-masing item todolist.
Pertama mari kita tambahkan dua buah fungsi baru dengan nama toggleTodo & deleteTodo di dalam methods pada component todo.
method: {
toggleTodo(todo){
let index = this.todos.indexOf(todo);
this.todos[index].done = !this.todos[index].done
},
deleteTodo(todo){
let index = this.todos.indexOf(todo);
this.todos.splice(index,1)
},
}
fungsi toggleTodo
Penjelasannya adalah fungsi toggleTodo akan menerima todo item sebagai parameternya, kemudian kita akan mencari posisi index item todo tersebut di dalam array todos.
Jika sudah ditemukan selanjutnya kita akan mengupdate status done dari item todo tersebut menjadi kebalikannya.
fungsi deleteTodo
Untuk menghapus item dari sebuah array, maka kita menggunakan fungsi javascript yaitu .splice untuk menghapus sebuah item array pada index yang ditentukan.
Edit template todo, tambahkan directive v-on di dalam pemanggilan item-todo seperti di bawah ini.
<todo-item v-for="item,index in todos" v-bind:item="item" v-bind:key="index" v-on:toggleTodo="toggleTodo" v-on:deleteTodo="deleteTodo"></todo-item>
Agar parent & child component bisa bertukar event, maka kita bisa mengimplementasikan event interface dan sebuah directive v-on. Di child event kita bisa menggunakan event interface berupa:
- Mendengarkan event yang dikirim dari parent component dengan
$on(eventName) - Memanggil parent event dari child component dengan
$emit(eventName)
Tambahkan fungsi baru di component todo-item untuk mengupdate dan menghapus todo item.
methods: {
toggleTodo(){
this.$emit('toggleTodo',this.item)
},
deleteTodo(){
this.$emit('deleteTodo',this.item)
}
},
Jangan lupa edit juga template dari todo-item.
Kita akan memakai directive v-on:click untuk memanggil masing-masing method tersebut pada button yang sudah kita buat.
...
template: '<li class="list-group-item" v-bind:style="isActive">{{ item.name }}'+
'<button type="button" class="btn btn-success float-right" v-on:click="toggleTodo">'+
'∨'+
'</button>'+
'<button type="button" class="btn btn-danger float-right" aria-label="Close" v-on:click="deleteTodo">'+
'<span aria-hidden="true">×</span>'+
'</button>'+
'</li>',
...
Penjelasan
Jadi saat tombol untuk mengupdate todo item di click, maka akan dipanggil method toggleTodo yang berisi this.$emit('toggleTodo',this.item) yang akan memanggil method toggleTodo di parent component yaitu todo. Begitu juga saat tombol hapus todo item di click.
Coba refresh file index.html dan aplikasi todolist yang sederhana dengan Vue sudah selesai kita buat.
7. Kesimpulan
Dengan menggunakan Vue, kita bisa membuat sebuah aplikasi atau single page application dengan lebih mudah dan cepat. Dalam tutorial kali ini kita sudah belajar beberapa fitur dari Vue seperti data binding, directive, event.
Untuk tutorial selanjutnya kita bisa mengimplementasikan local storage agar saat todolist ini direload, maka todolist item yang sudah dibuat sebelumnya tidak terhapus.
Sekian tutorial membuat todolist sedehana dengan Vue, semoga bisa bermanfaat untuk teman yang ingin belajar Vue. Jika ada kendala saat kalian mencoba tutorial ini silakan tanyakan lewat kolom komentar di bawah.
