[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-belajar-vue-js-membuat-aplikasi-todolist-sederhana-2":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},358,"belajar-vue-js-membuat-aplikasi-todolist-sederhana-2","Belajar Vue Js: Membuat Aplikasi Todolist Sederhana","Agus Yusida October 17, 2017 Hallo teman ngide! Setelah sebelumnya kita membahas sedikit perkenalan tentang Vue, kali ini kita akan membuat sebuah aplikasi sederhana yaitu membuat todolist dengan meng",null,[],"2019-08-25T16:00:00Z","2026-07-14T04:39:33.319816Z","\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>  \u003Cimg alt=\"Go to the profile of Agus Yusida\" src=\"http:\u002F\u002F0.gravatar.com\u002Favatar\u002Fc0b0eeb94d5a7fd159a09fd4a506d27b?s=96&amp;d=mm&amp;r=g\"\u002F>  Agus Yusida October 17, 2017\u003Cp>Hallo teman ngide! Setelah sebelumnya kita membahas sedikit perkenalan tentang Vue, kali ini kita akan membuat sebuah aplikasi sederhana yaitu membuat todolist dengan menggunakan Vue js.\u003C\u002Fp>\u003Cp>Apa saja yang perlu kalian siapkan sebelum melanjutkan tutorial ini?\u003C\u002Fp>\u003Col>\u003Cli>Download Vue js library untuk yang internetnya lambar dan yang kenceng bisa pakai CDN\u003C\u002Fli>\u003Cli>Texteditor kesukaan kamu seperti Sublime.\u003C\u002Fli>\u003Cli>Niat belajar\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Jika bahan diatas sudah siap, kita akan lanjutkan membuat sebuah todolist yang kira-kira tampilan akhirnya nanti akan seperti berikut ini.\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"Contoh Vue Todolist\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Ch3>1. Buat file index.html\u003C\u002Fh3>\u003Cp>Pertama kita membuat sebuah file baru dengan nama \u003Ccode>index.html\u003C\u002Fcode> kemudian sisipkan file Vue melalui script tag seperti kode di bawah ini:\u003C\u002Fp> \u003Cpre>\u003Ccode>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Todo Aps&lt;\u002Ftitle&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n    &lt;!-- Bootstrap CSS --&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F4.0.0-beta\u002Fcss\u002Fbootstrap.min.css\" integrity=\"sha384-\u002FY6pD6FV\u002FVv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\"&gt;\n  &lt;\u002Fhead&gt;\n&lt;body&gt;\n\t&lt;div id=\"app\"&gt;\n      {{ message }}\n\t&lt;\u002Fdiv&gt;\n&lt;\u002Fbody&gt;\n&lt;script src=\"https:\u002F\u002Funpkg.com\u002Fvue\"&gt;&lt;\u002Fscript&gt;\n&lt;\u002Fhtml&gt;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Kita juga menambahkan boostrap framework untuk mempercantik tampilan dari todolist yang kita buat.\u003C\u002Fp>\u003Ch3>2. Buat file app.js\u003C\u002Fh3>\u003Cp>File \u003Ccode>app.js\u003C\u002Fcode> berfungsi untuk menampung semua script-script javascript yang akan kita pakai untuk membuat todolist. Pertama kita buat instance Vue di dalam \u003Ccode>app.js\u003C\u002Fcode> \u003C\u002Fp>\u003Cpre>\u003Ccode>var app = new Vue({\n\tel: '#app',\n\tdata: {\n\t\t'message': 'Hello world'\n\t},\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Sisipkan file \u003Ccode>app.js\u003C\u002Fcode> di \u003Ccode>index.html\u003C\u002Fcode> dengan menambahkan kode di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>&lt;script type=\"text\u002Fjavascript\" src=\"app.js\"&gt;&lt;\u002Fscript&gt;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Sekarang coba kalian buka file \u003Ccode>index.html\u003C\u002Fcode> di browser. Jika tidak ada masalah maka kamu akan mendapatkan tampilan sebuah text “Hello world”.\u003C\u002Fp>\u003Ch3>3. Membuat component todo\u003C\u002Fh3>\u003Cp>Selanjutnya kita akan membuat sebuah component baru untuk menampilkan todolist. Kita akan namai dengan \u003Ccode>todo\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Tambahkan kode di bawah ini di dalam file app.js\u003C\u002Fp>\u003Cpre>\u003Ccode>Vue.component('todo',{\n\ttemplate: '&lt;div class=\"container\"&gt;'+\n\t\t'&lt;div class=\"row justify-content-center\"&gt;'+\n\t\t\t'&lt;div class=\"col-md-6\"&gt;'+\n\t\t\t\t'&lt;h1 class=\"text-center\"&gt;Todolist&lt;\u002Fh1&gt;'+\n\t\t\t\t'&lt;hr&gt;'+\n\t\t\t\t'&lt;input type=\"text\" class=\"form-control\" placeholder=\"Input todolist &amp; enter\" v-model=\"todo.name\" &gt;'+\n\t\t\t\t'&lt;hr&gt;'+\n\t\t\t\t'&lt;ul class=\"list-group\"&gt;'+\n\t\t\t\t\t'&lt;li class=\"list-item\" v-for=\"item in todos\"&gt;{{ item.name }}&lt;\u002Fli&gt;'+\n\t\t\t\t'&lt;\u002Ful&gt;'+\n\t\t\t'&lt;\u002Fdiv&gt;'+\n\t\t'&lt;\u002Fdiv&gt;'+\n\t'&lt;\u002Fdiv&gt;',\n\tdata: function(){\n\t\treturn {\n\t\t\ttodos: [\n\t\t\t\t{\n\t\t\t\t\tname: 'Todo 1',\n\t\t\t\t\tdone: true,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'Todo 2',\n\t\t\t\t\tdone: false,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'Todo 3',\n\t\t\t\t\tdone: false,\n\t\t\t\t},\t\n\t\t\t],\n\t\t\ttodo: {\n\t\t\t\tname: '',\n\t\t\t\tdone: false\n\t\t\t}\n\t\t}\n\t},\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Edit file \u003Ccode>index.html\u003C\u002Fcode>, tambahkan component todo yang sudah dibuat sebelumnya di dalam div.\u003C\u002Fp>\u003Cpre>\u003Ccode>...\n&lt;div id=\"app\"&gt;\n\t&lt;todo&gt;&lt;\u002Ftodo&gt;\n&lt;\u002Fdiv\n...\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Simpan file \u003Ccode>index.html\u003C\u002Fcode> tersebut dan coba buka lagi di browser kamu. Jika tidak terjadi error, maka kamu akan mendapatkan tampilan seperti berikut ini:\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"Todolist Vue js\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Sedikit penjelasan dari component \u003Ccode>todo\u003C\u002Fcode> diatas adalah aplikasi todolist ini memiliki sebuah data \u003Ccode>todos\u003C\u002Fcode> yang berfungsi untuk menampung data dari item todolist tersebut. Kemudian kita menggunakan directive \u003Ccode>v-for\u003C\u002Fcode> untuk melakukan perulangan dan menampilkan masing-masing item todolist ke dalam view.\u003C\u002Fp>Rekomendasi:  Bagaimana cara membuat ZIP file dengan PHP?\u003Ch3>4. Menambah item todolist\u003C\u002Fh3>\u003Cp>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.\u003C\u002Fp>\u003Cp>Langkah pertama adalah menambahkan event saat user menekan enter. Caranya edit template dari component todo di bagian text inputnya menjadi seperti berikut ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>&lt;input type=\"text\" class=\"form-control\" placeholder=\"Input todolist &amp; enter\" v-model=\"todo.name\" v-on:keyup.enter=\"addTodo\"&gt;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Jadi ada tambahan directive \u003Ccode>v-on:keyup.enter=\"addTodo\"\u003C\u002Fcode>, maksudnya adalah saat user menekan enter maka Vue akan memanggil fungsi \u003Ccode>addTodo\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Selanjutnya tambahkan sebuah method baru dengan nama addTodo di component \u003Ccode>todo\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode>methods: {\n\t\taddTodo(){\n\t\t\tif(this.todo.name != ''){\n\t\t\t\tthis.todos.push(this.todo)\n\t\t\t\tthis.todo = {\n\t\t\t\t\tname: '',\n\t\t\t\t\tdone: false\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>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 \u003Ccode>todos\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Coba kamu buka file \u003Ccode>index.html\u003C\u002Fcode> 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.\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"vue js todolist tutorial\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Ch3>5. Membuat component todolist item.\u003C\u002Fh3>\u003Cp>Kita akan membuat sebuah component baru dengan nama todo-item yang berfungsi untuk menampilkan masing-masing item dari todolist tersebut.\u003C\u002Fp> \u003Cp>Buka file app.js dan tambahkan kode di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>Vue.component('todo-item',{\n\tprops: ['item'],\n\ttemplate: '&lt;li class=\"list-group-item\" v-bind:style=\"isActive\"&gt;{{ item.name }}'+\n\t\t'&lt;button type=\"button\" class=\"btn btn-success float-right\"&gt;'+\n\t\t  '∨'+\n\t\t'&lt;\u002Fbutton&gt;'+\n\t\t'&lt;button type=\"button\" class=\"btn btn-danger float-right\" aria-label=\"Close\"'+\n\t\t  '&lt;span aria-hidden=\"true\"&gt;×&lt;\u002Fspan&gt;'+\n\t\t'&lt;\u002Fbutton&gt;'+\n\t'&lt;\u002Fli&gt;',\n\tmethods: {\n\t\t\n\t},\n\tcomputed: {\n\t\tisActive(){\n\t\t\tif(this.item.done){\n\t\t\t\treturn 'text-decoration:line-through'\n\t\t\t}\n\t\t}\n\t}\n});\n....\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Edit component todo di bagian list item, kita ganti dengan component todo-item yang baru kita buat.\u003C\u002Fp>\u003Cpre>\u003Ccode>...\n'&lt;todo-item v-for=\"item,index in todos\" v-bind:item=\"item\" v-bind:key=\"index\" &gt;&lt;\u002Ftodo-item&gt;'+\n...\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Coba buka lagi file \u003Ccode>index.html\u003C\u002Fcode>, seharusnya tampilannya masih seperti sebelumnya.\u003C\u002Fp>\u003Ch3>6. Mengupdate dan menghapus Todolist Item\u003C\u002Fh3>\u003Cp>Fitur selanjutnya yang ingin kita tambahkan yaitu \u003Cstrong>mengupdate\u003C\u002Fstrong> dan \u003Cstrong>menghapus\u003C\u002Fstrong> masing-masing item todolist. \u003C\u002Fp>\u003Cp>Pertama mari kita tambahkan dua buah fungsi baru dengan nama \u003Ccode>toggleTodo\u003C\u002Fcode> &amp; \u003Ccode>deleteTodo\u003C\u002Fcode> di dalam methods pada component todo.\u003C\u002Fp>\u003Cpre>\u003Ccode>method: {\n  toggleTodo(todo){\n\t\t\tlet index = this.todos.indexOf(todo);\n\t\t\tthis.todos[index].done = !this.todos[index].done\n\t\t},\n  deleteTodo(todo){\n\t\t\tlet index = this.todos.indexOf(todo);\n\t\t\tthis.todos.splice(index,1)\n\t\t},\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>\u003Cstrong>toggleTodo\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>Penjelasannya adalah, fungsi \u003Ccode>toggleTodo\u003C\u002Fcode> akan menerima \u003Ccode>todo\u003C\u002Fcode> item sebagai parameternya, kemudian kita akan mencari posisi index item \u003Ccode>todo\u003C\u002Fcode> tersebut di dalam array \u003Ccode>todos\u003C\u002Fcode>. Jika sudah ditemukan selanjutnya kita akan mengupdate status done dari item \u003Ccode>todo\u003C\u002Fcode> tersebut menjadi kebalikannya.\u003C\u002Fp>Rekomendasi:  Kenalan dengan Vuex, Tutorial State Management di Vue Js\u003Cp>\u003Cstrong>deleteTodo\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>Untuk menghapus item dari sebuah array, maka kita menggunakan fungsi javascript yaitu .\u003Ccode>splice\u003C\u002Fcode> untuk menghapus sebuah item array pada index yang ditentukan.\u003C\u002Fp>\u003Cp>Edit template \u003Ccode>todo\u003C\u002Fcode>, tambahkan directive \u003Ccode>v-on\u003C\u002Fcode> di dalam pemanggilan item-todo seperti di bawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>&lt;todo-item v-for=\"item,index in todos\" v-bind:item=\"item\" v-bind:key=\"index\" v-on:toggleTodo=\"toggleTodo\" v-on:deleteTodo=\"deleteTodo\"&gt;&lt;\u002Ftodo-item&gt;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Agar parent &amp; child component bisa bertukar event, maka kita bisa mengimplementasikan \u003Cem>event interface\u003C\u002Fem> dan sebuah directive \u003Ccode>v-on\u003C\u002Fcode>. Di child event kita bisa menggunakan \u003Cem>event interface\u003C\u002Fem> berupa:\u003C\u002Fp>\u003Cul>\u003Cli>Mendengarkan event yang dikirim dari parent component dengan \u003Ccode>$on(eventName)\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Memanggil parent event dari child component dengan \u003Ccode>$emit(eventName)\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Tambahkan fungsi baru di component \u003Ccode>todo-item\u003C\u002Fcode> untuk mengupdate dan menghapus todo item.\u003C\u002Fp>\u003Cpre>\u003Ccode>methods: {\n\t\ttoggleTodo(){\n\t\t\tthis.$emit('toggleTodo',this.item)\n\t\t},\n\t\tdeleteTodo(){\n\t\t\tthis.$emit('deleteTodo',this.item)\n\t\t}\n\t},\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Jangan lupa edit juga template dari todo-item. Kita akan memakai directive \u003Ccode>v-on:click\u003C\u002Fcode> untuk memanggil masing-masing method tersebut pada button yang sudah kita buat.\u003C\u002Fp>\u003Cpre>\u003Ccode>...\ntemplate: '&lt;li class=\"list-group-item\" v-bind:style=\"isActive\"&gt;{{ item.name }}'+\n\t\t'&lt;button type=\"button\" class=\"btn btn-success float-right\" v-on:click=\"toggleTodo\"&gt;'+\n\t\t  '∨'+\n\t\t'&lt;\u002Fbutton&gt;'+\n\t\t'&lt;button type=\"button\" class=\"btn btn-danger float-right\" aria-label=\"Close\" v-on:click=\"deleteTodo\"&gt;'+\n\t\t  '&lt;span aria-hidden=\"true\"&gt;×&lt;\u002Fspan&gt;'+\n\t\t'&lt;\u002Fbutton&gt;'+\n\t'&lt;\u002Fli&gt;',\n...\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>\u003Cstrong>Penjelasan\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>Jadi saat tombol untuk mengupdate todo item di click, maka akan dipanggil method \u003Ccode>toggleTodo\u003C\u002Fcode> yang berisi \u003Ccode>this.$emit('toggleTodo',this.item)\u003C\u002Fcode> yang akan memanggil method \u003Ccode>toggleTodo\u003C\u002Fcode> di parent component yaitu \u003Ccode>todo\u003C\u002Fcode>. Begitu juga saat tombol hapus todo item di click.\u003C\u002Fp>\u003Cp>Coba refresh file index.html dan aplikasi todolist yang sederhana dengan Vue sudah selesai kita buat.\u003C\u002Fp>\u003Ch3>7. Kesimpulan\u003C\u002Fh3>\u003Cp>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. \u003C\u002Fp>\u003Cp>Untuk tutorial selanjutnya kita bisa mengimplementasikan local storage agar saat todolist ini direload, maka todolist item yang sudah dibuat sebelumnya tidak terhapus.\u003C\u002Fp>\u003Cp>Sekian tutorial membuat todolist sedehana dengan Vue, semoga bisa bermanfaat untuk teman ngide semua. Jika ada kendala saat kalian mencoba tutorial ini silakan tanyakan lewat kolom komentar di bawah.\u003C\u002Fp>Please follow and like us:\u003Ca href=\"http:\u002F\u002Fwww.specificfeeds.com\u002Fwidgets\u002FemailSubscribeEncFeed\u002FUmN5cWduWHlmN09VS1JQcFMrLzFJODRBMlMxY3R4RWlzQnFqb2REQlVwRWxodzRTT3NLYTNxQ2FUbzFvSkJTM2hFMU9SOVdWdGNiSlF0N3ZFMjdqR1A0U2VoL0tFYXdjb1JOUnRldUlqd2ZHYU84K2lvQXZ4aHNXQ3hYZ2g2N018RlF5OExKZXdlaW1QWllodDc3c3ZscmliQ1pDaTFBSFdTWUQ3MElieVNIST0=\u002FOA==\u002F\">\u003Cimg src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Fa>\u003Ca href=\"http:\u002F\u002Ftwitter.com\u002Fshare\">\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Fwww.pinterest.com\u002Fpin\u002Fcreate\u002Fbutton\u002F?url=&amp;media=&amp;description=\">\u003C\u002Fa> Tags: Tutorial Vuejs","Agus Yusida October 17, 2017 Hallo teman ngide! Setelah sebelumnya kita membahas sedikit perkenalan tentang Vue, kali ini kita akan membuat sebuah aplikasi sede",[],[],0]