Jika mencari tentang apa javascript framework yang populer saat ini, kita pasti akan menemukan bahwa vue.js adalah salah satunya.
Jika mencari bagaimana memulai dengan vue, mempelajari dan mencoba bagaimana membuat aplikasi sederhana dengan vue, disini kita akan pelajarinya bersama.
Apa itu Vue.js?
Singakatnya, vue.js merupakan kerangka kerja progresif untuk membangun antarmuka pengguna. Vue adalah kerangka kerja javacript open source yang dapat kita gunakan untuk membangun frontend aplikasi kita.
Vue.js merupakan framework yang populer, ringan, mudah dipelajari, dan banyak fitur didalamnya.
Yang akan kita perlajari?
Kita akan coba membuat aplikasi sederhana. Dalam pembuatan aplikasi tersebut, kita akan dapat belajar mengenai bagaimana cara penginstalan, tentang vue instance, rendering, membuat data, methods, events, conditional, loop, dll.
Kita akan buat aplikasi CRUD (Cread, Read, Update dan Delete), bagaimana cara membuat data, membaca data, mengedit, dan menghapus data.
Untuk melihat sepeti apa aplikasi sederaha yang akan kita buat, silahkan melalui link demo dibawah ini.
Instalasi
Kita mulai dan kita awali dengan melihat bagaimana cara instalasi vue.
Ada dua cara disini yang dapat kita gunakan. Pertama cara paling sederhana untuk instalasi vue adalah dengan menggunakan CDN, dimana hanya perlu menambahkan link cdn ke dalam file html kita.
Contohnya seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script>
const App = new Vue({
el: '#app',
data: {
message: 'Hello World!',
}
})
</script>
</body>
</html>
Pada html diatas kita buat tag script di bagian head dengan link ke cdn. Kemudian didalam body kita buat instance vue baru dan menautkan dengan element DOM.
Kemudian pada objek data kita membuat properti message dan dirender dengan tanda bracket ganda {{ }} yang kan menampilkan pesan Hello World.
Cara instalasi yang kedua adalah menggunakan vue CLI (Command Line Interface). Cara yang mudah dan cepat yang membantu kita dalam membuat struktur aplikasi untuk development.
Vue CLI
Vue CLI merupakan baris perintah yang kita gunakan melalui terminal untuk membuat project baru yang memberikan kemudahan bagi kita dengan menyediakan scaffolding aplikasi.
Untuk dapat menggunakannya kita perlu menginstall package cli di komputer kita. Silahkan jalankan perintah dibawah ini pada terminal.
npm i -g @vue/cli @vue/cli-service-global #atau yarn global add @vue/cli @vue/cli-service-global
Package @vue/cli kita install secara global dengan package manager yang kita gunakan. Silahkan pilih salah satu diatas, menggunakan npm atau yarn.
Lalu untuk membuat project baru kita gunakan perintah vue create [nama project] pada terminal. Contohnya seperti dibawah ini.
Pada gambar diatas kita buat project baru dengan nama vue-app, dan setelah menekan enter akan ada pilihan untuk memilih preset.
Kita bisa memilih priset secara manual dengan beberapa pilihan plugin / fitur yang ingin ditambahkan, atau memilih preset secara default.
Sebagai contoh kita akan pilih yang default dan kita gunakan vue.js versi 2. Setelah memilih dan enter, kita tinggal tunggu proses instalasi selesai.
Setelah selesai kita gunakan perintah serve untuk menjalankan aplikasi mode development.
cd vue-app npm run serve
Setelah server berjalan, kita buka http://localhost:8080/ pada browser.
Vue DevTools
Vue DevTools merupakan tool tambahan / add ons / extension yang perlu kita install pada browser yang dapat membatu kita ketika bekerja dengan vue.
Dengan Vue DevTools kita dapat melihat informasi seperti komponen yang kita buat, props, vuex store, routing, dll.
Untuk menambahkan pada browser silahkan melalui link dibawah ini.
Text Editor dan Extensions
Text Editor / Code Editor kita bisa gunakan apa saja untuk coding sesuai keinginan. Jika kita berkerja dengan vue, ada beberapa extentions yang dapat membatu dan mempermudah kita, baik itu untuk formatting, debugging, syntax-highlighting, dll.
Sebagai contoh jika menggunakan VS Code, silahkan install extension dibawah ini:
- Vetur
- Vue VS Code Extension Pack
Struktur File
Mari kita buka project yang sudah dibuat menggunakan CLI tadi pada editor yang kita gunakan. Kita akan melihat struktur file didalamnya.
Project baru yang dibuat menggunakan Vue CLI dengan pemilihan preset default terlihat seperti pada gambar diatas; akan ada direktori lainnya jika kita memilih preset manual susuai plugin yang kita tambahkan.
Mari kita lihat stuktur folder dan file pada gambar diatas:
- node_modules: berisikan package-package yang telah diinstall.
- public: folder untuk file / aset statis publik seperti favicon.ico dan index.html.
- src: berisikan folder dan file untuk sumber daya aplikasi.
- src/assets: tempat untuk aset aplikasi seperti gambar dan font.
- src/components: tempat file komponen aplikasi.
- src/App.vue: merupakan komponen utama / main dari semua komponen.
- src/main.js: berfungi untuk merender aplikasi ke DOM.
- .gitignore: merupakan file kontrol git untuk mengatur folder dan file yang perlu dikecualikan.
- babel.config.js: merupakan file konfigurasi untuk babel.
- package.json: berisikan package dan perintah yang digunakan dalam pengembangan aplikasi.
- package-lock.json: berisikan depedensi dan list package digunakan.
- README.md: berisikan informasi umum tentang project.
Membuat Aplikasi CRUD
Untuk lebih mudah melihat dan mempelajari setiap fungsi / fitur yang ada dan juga bagaimana cara kerjanya, kita akan mulai membuat aplikasi CRUD dengan Vue.js.
Silahkan ikuti langkah-langkahnya dibawah:
Instalasi Bootstrap
Kita akan menggunakan bootstrap untuk css dan desain tampilan yang kita butuhkan. Silahkan jalankan perintah dibawah ini pada terminal.
npm install bootstrap jquery popper.js
Pada perintah diatas selain kita menginstall bootstrap, kita juga install jquery dan popper.js sebagai plugin tambahan untuk bootstrap agar mendukung javascript; contohnya event toogle menu dropdown pada bagian navbar.
Import Bootstrap
Kemudian agar dapat digunakan kita perlu mengimportnya. Silahkan buka src > main.js lalu import bootstrap seperti dibawah ini.
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Entry Point
Mari kita lihat isi dari file main seperti diatas. File main.js merupakan entry point aplikasi, dimana kita menambahkan library, module atau depedensi yang digunakan.
ProductionTip diatur menjadi false atau dimatikan agar vue tidak menampilkan info / tip di console browser.
Kemudian ada vue instance yang akan merender aplikasi ke element dengan id app pada index.html.
Mencoba Css Bootstrap
Setelah bootstrap diimport pada main.js, mari kita coba menggunakannya dengan menambahkan contoh komponen bootstrap.
Silahkan buka komponen HelloWorld.vue dan tambahkan komponen jumbotron bootstrap dibawah ini.
... <div class="jumbotron"> <h1 class="display-4">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div> ...
Hasilnya seperti gambar dibawah ini. Bootstrap sudah terinstall dan siap digunakan.
Single File Components
Dalam pembuatan komponen pada Vue, ada beberapa metode yang dapat kita gunakan. Kita dapat membuat dengan cara pendaftaran komponen global menggunakan konstruktor Vue.component atau dengan Single File Component.
Mari kita buka kembali komponen HelloWorld.vue, kita lihat apa yang ada pada komponen tersebut.
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style scoped>
...
</style>
Pada komponen HelloWorld.vue terdapat tiga bagian didalamnya, yaitu:
- <template>: berisikan markup HTML komponen.
- <script>: berisikan kode JavaScript komponen.
- <style>: berisikan CSS komponen.
Komponen HelloWorld.vue merupakan bentuk dari Single File Components. Sebuah file dengan ekstensi .vue dimana kita dapat menuliskan HTML, JavaScript, dan CSS dari komponen dalam satu file.
Pada tag <style> sendiri jika kita lihat terdapat atribut scoped, dimana fungsinya adalah agar CSS yang dibuat hanya berlaku / diterapkan pada komponen tersebut.
Pendaftaran Global Komponen
Sedangkan untuk pendaftaran komponen global menggunakan Vue.component, ini akan membuat komponen terdaftar secara global dan dapat kita gunakan di template dari semua root Vue Instance (new vue).
Contohnya seperti dibawah ini.
Vue.component('nama-komponen-a, {
// ... options ...
});
Vue.component('nama-komponen-b', {
// ... options ...
});
let app = new Vue({
el: '#app'
});
<div id="app">
<nama-komponen-a></nama-komponen-a>
<nama-komponen-b></nama-komponen-b>
</div>
Mungkin tidak terlalu penjang lebar pembahasan komponen disini, contoh lainnya serta dokumentasi lengkap tentang komponen mungkin bisa di lihat disitus vue.js mengenai komponen dasar vue untuk mempelajari lebih lanjut.
Membuat Komponen Baru
Mari kita buat komponen baru untuk aplikasi CRUD yang akan kita buat. Silahkan buat sebuah komponen dengan nama CustomerTable.vue dan buat sebuah tabel dengan beberapa data seperti dibawah ini.
//CustomerTable.vue
<template>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bambang</td>
<td>[email protected]</td>
<td>Jl.Kenanga</td>
</tr>
<tr>
<td>Dika</td>
<td>[email protected]</td>
<td>Jl.Mangga</td>
</tr>
<tr>
<td>Agus</td>
<td>[email protected]</td>
<td>Jl.Mataram</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'customer-table',
}
</script>
<style scoped>
</style>
Kemudian kita import dan menempatkan komponen customer-table pada App.vue.
<template>
<div id="app">
<div class="container">
<h1 class="mb-4">Daftar Pelanggan</h1>
<customer-table/>
</div>
</div>
</template>
<script>
import CustomerTable from '@/components/CustomerTable.vue'
export default {
name: 'App',
components: {
CustomerTable
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
margin-top: 60px;
}
</style>
Jadinya seperti gambar dibawah ini.
Sedikit membahas komponen yang kita buat diatas.
Pertama tentang penamaan komponen. Kita memberi nama komponen dan mengimportnya dengan gaya PascalCase (CustomerTable) dan penggunaan pada template menggunakan kebab-case (customer-table).
Ada rekomendasi ketika kita membuat dan memberi nama komponen untuk menghindari error atau konfik antar elemen html, dimana sebaiknya menggunakan lebih dari satu kata.
Lalu pada file App.vue kita juga dapat menggunakan @ untuk import yang mereferensikan folder /src.
Membuat Data
Selanjutnya kita akan membuat data dan menambahkan array dan objek dari data yang ada pada tabel diatas.
Pada App.vue kita tambahkan data seperti dibawah ini.
...
export default {
name: 'App',
components: {
CustomerTable
},
data() {
return {
customers: [
{
id: 1,
name: 'Bambang',
email: '[email protected]',
address: 'Jl.Kenanga',
},
{
id: 2,
name: 'Dika',
email: '[email protected]',
address: 'Jl.Mangga',
},
{
id: 3,
name: 'Agus',
email: '[email protected]',
address: 'Jl.Mataram',
},
],
}
},
}
...
Nama properti kita gunakan saja bahasa ingris; dan kita menambahkan id agar data bersifat unik dan mudah untuk di identifikasi.
Lalu kita buat v-bind untuk meneruskan data array customers dengan prop secara dinamis.
<customer-table v-bind:customers='customers'/> #atau <customer-table :customers='customers'/>
Props
Props adalah cara kita meneruskan data dari komponen induk ke komponen anak.
Kasus kita diatas, komponen root (App.vue) adalah sebagai komponen induk dan kita memiliki data array disana, kemudian kita akan gunakan atau akses data tersebut pada CustomerTabel.vue sebagai komponen anak.
Diatas, kita sudah menambahkan attribut pada komponen untuk mengirim data pada pada komponen anak. Sekarang kita buka komponen CustomerTable.vue dan buat seberti dibawah ini untuk menerima props.
<script>
export default {
name: 'customer-table',
props: {
customers: Array,
},
}
</script>
Diatas kita mambahkan props dengan tipe array. Selain array, ada beberapa tipe lainnya, seperti berikut ini:
- Strings
- Number
- Boolean
- Array
- Object
- Function
Loops
Selanjutnya kita akan merender data array dari props customers dan membuat loop. Silahkan buka komponen CustomerTable.vue dan buat seperti dibawah ini.
...
<tbody>
<tr v-for="customer in customers" :key="customer.id">
<td>{{ customer.name }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.address }}</td>
</tr>
</tbody>
...
Pembuatan loop kita menggunakan directive v-for seperti diatas. Customer adalah alias dari properti customers untuk menampilkan daftar item atau value dari data array yang ingin ditampilkan.
Kemudian agar setiap elemen unik, kita menambahkan key menggunakan directiv v-bind:key atau :key pada elemen.
Sekarang mari kita lihat pada browser.
Jika dilihat tidak ada perubahan yang terjadi dari apa yang ditampilkan; hasilnya pun tetap sama. Namun dari apa yang kita buat diatas, kita sudah mempelajari sedikit mengenai komponen, data, props, dan loop di vue.js.
Membuat Pelanggan
Selanjutnya kita akan membuat fungsi untuk pembuatan pelanggan baru. Mari kita buat komponen baru dan membuat form untuk input data pelanggan.
Silahkan buat komponen baru dengan nama CustomerForm.vue dan buat form seperti dibawah ini.
<template>
<div class="customer-form">
<form>
<div class="form-group">
<label for="name">Nama</label>
<input type="text" class="form-control" placeholder="Masukan nama pelanggan">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" placeholder="Masukan email pelanggan">
</div>
<div class="form-group">
<label for="address">Alamat</label>
<textarea type="text" class="form-control"
placeholder="Masukan alamat pelanggan"> </textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</template>
<script>
export default {
name: 'customer-form',
}
</script>
Lalu import pada App.vue, dan buat seperti dibawah ini.
//App.vue
<template>
<template>
<div id="app">
<div class="container">
<h1 class="mb-4">Daftar Pelanggan</h1>
<hr>
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Tambah Pelanggan
</button>
</p>
<customer-table v-bind:customers='customers'/>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<h2>Input Data Pelanggan</h2>
<hr>
<customer-form />
</div>
</div>
</div>
</div>
</template>
<script>
import CustomerTable from '@/components/CustomerTable.vue'
import CustomerForm from '@/components/CustomerForm.vue'
export default {
name: 'App',
components: {
CustomerTable,
CustomerForm,
},
...
}
</script>
Jadinya seperti gambar berikut:
Kita menambahkan plugin collapse dari bootstrap untuk menyembunyikan form input pelanggan dan akan tampil jika menekan button 'Tambah Pelanggan'.
Setelah form input dibuat, mari kita buka kembali komponen CustomerForm.vue dan kita buat data dan properti.
<script>
export default {
name: 'customer-form',
data(){
return {
customer: {
name: '',
email: '',
address: '',
}
}
}
}
</script>
Kemudian kita tambahkan atribut v-model pada elemen input dan textarea.
<input type="text" v-model="customer.name" class="form-control" placeholder="Masukan nama pelanggan"> <input type="text" v-model="customer.email" class="form-control" placeholder="Masukan email pelanggan"> <textarea type="text" v-model="customer.address" class="form-control" placeholder="Masukan alamat pelanggan"></textarea>
Fungsi dari V-model adalah untuk membuat two-way data binding atau data binding dua arah antara inputan dan komponen. Dimana secara otomatis akan menyimpan dan memperbaharui data yang kita input di properti data komponen.
Untuk melihatnya silahkan buka vue-devtools dan lihat komponen CustomerForm di menu components dan silahkan ketik apa saja pada form input.
Kemudian untuk mengirim formulir, kita buat event listener pada elemen form.
<form @submit.prevent="submit"> #atau <form v-on:submit.prevent="submit">
V-on direktif berfungsi untuk menjalankan suatu tindakan ketika ada perintah dari DOM. Seperti yang kita buat diatas, kita manambahkan v-on:submit atau dapat disingkat @submit untuk mengirim formulir ketika kita menekan button submit.
Pada atribut kita juga tuliskan nama method 'submit' yang akan/telah dibuat. Dan fungsi dari .prevent atau sama juga event.preventDefault() adalah untuk mencegah agar browser tidak menggunakan metode POST/GET default yang disediakan oleh formulir; dan browser tidak memuat ulang halaman.
Methods
Diatas kita sudah memasang nama method 'submit' di atribut v-on pada elemen form. Selanjutnya method submit() kita tambahkan ke dalam properti methods seperti dibawah ini.
<script>
export default {
name: 'customer-form',
data(){
return {
customer: {
name: '',
email: '',
address: '',
}
}
},
methods: {
submit() {
console.log('ok!')
},
},
}
</script>
Silahakn klik button submit kemudian lihat pada console browser (ctrl+shift+i). Yang terjadi adalah kita akan melihat hasil console.log sesuai yang kita buat di dalam method submit().
Custome Events
Sekarang yang akan kita lakukan adalah data yang kita buat/input di komponen anak (CustomerForm.vue), kita akan kirim / diteruskan ke komponen orangtua (App.vue).
Untuk dapat meneruskannya, kita akan membuat custome events menggunakan $emit('nama-event'). Seperti berikut:
submit() {
this.$emit('add-customer', this.customer)
},
Silahkan hapus console.log dan buat seperti yang diatas. Kita buat emit di dalam method submit() dengan memberi nama event 'add-customer' dan juga data yang akan diteruskan.
Event Listener
Setelah event disiarkan dari komponen anak, selanjutnya pada komponen induk kita buat event listener di <customer-form /> untuk menangkap event.
//App.vue <customer-form @add-customer="addCustomer"/>
Diatas kita menambahkan atribut @add-customer dan method addCustomer. @ sendiri merupakan alias dari v-on untuk menyingkat, dan add-customer adalah nama event yang kita buat sebelumnya di komponen CustomerForm.vue, disini pastikan nama even yang di emit sama dengan nama event yang akan ditangkap/diterima dikomponen lain, dan method addCustomer() untuk menambahakan data pelanggan baru ke dalam array.
Selanjutnya mari kita tambahkan method addCustomer() ke dalam properti methods.
Kita juga tambahkan sebuah argument untuk mengambil data pelanggan dan kita masukan ke dalam array menggunakan metode push().
methods: {
addCustomer(customer) {
this.customers.push(customer);
}
Sampai disini mari kita mencobanya. Silahkan input data pelanggan baru dan submit.
Contoh pada gambar diatas, data pelanggan baru telah berhasil dibuat dan ditampilkan pada tabel daftar pelanggan. Namun jika kita lihat pada form input masih terdapat value data sebelumnya; kita akan mengkosongkannya setelah formulir dikirim.
Silahkan update method submit() pada komponen CustomerForm.vue seperti dibawah ini.
submit() {
this.$emit('add-customer', this.customer)
this.customer = {
name: '',
email: '',
address: '',
}
},
Edit Data Pelanggan
Setelah kita sudah dapat membuat pelanggan baru, selanjutnya kita akan membuat proses pengeditan data pelanggan.
Langkah pertama mari kita buka komponen CustomerTable.vue; kemudian pada bagian elemen <tr> silahkan buat seperti dibawah ini.
<tr v-for="customer in customers" :key="customer.id">
<template v-if="customerId === customer.id">
<td>
<label for="name" class="font-weight-bold">Nama:</label>
<div>
<input type="text" v-model="customer.name" class="form-control" />
</div>
</td>
<td>
<label for="email" class="font-weight-bold">Email:</label>
<div>
<input type="text" v-model="customer.email" class="form-control" />
</div>
</td>
<td>
<label for="address" class="font-weight-bold">Address:</label>
<div>
<input type="text" v-model="customer.address" class="form-control" />
</div>
</td>
<td>
<button class="btn btn-success m-2" @click="saveEdit(customer)">Save</button>
<button class="btn btn-danger" @click="cancelEdit(customer)" >Cancel</button>
</td>
</template>
<template v-else>
<td>{{customer.name}}</td>
<td>{{customer.email}}</td>
<td>{{customer.address}}</td>
<td>
<button class="btn btn-primary" @click="editCustomer(customer)">Edit</button>
</td>
</template>
</tr>
Yang kita buat diatas adalah kita menambahkan elemen input untuk mengedit data pelanggan di dalam elemen <tr> beserta atribut v-model dengan value sesuai properti yang ada; dan kita buat kondisional dengan intruksi v-if v-else untuk menyembunyikan dan menampilkannya.
Kita juga membuat tiga button yang kita beri event listener dan nama method dengan argumen; yaitu button edit untuk masuk ke pengeditan, lalu ada button save untuk menyimpan perubahan, dan button cancel untuk membatalkan pengeditan.
Kemudian setelah itu kita buat data dan juga methods. Silahkan buat seperti dibawah ini:
export default {
name: 'customer-table',
props: {
customers: Array,
},
data() {
return {
customerId: null,
}
},
methods: {
editCustomer(customer) {
this.data = Object.assign({}, customer)
this.customerId = customer.id
// console.log(this.data);
},
saveEdit(customer) {
let id = this.data.id
this.$emit('edit-customer', id, customer)
this.customerId = null
},
cancelEdit(customer) {
Object.assign(customer, this.data)
this.customerId = null;
// console.log(this.customerId);
}
}
}
Mari kita lihat data dan method yang telah kita buat diatas. Kita membuat 3 method dan sebuah data.
Setiap method yang ada akan menjalankan tugasnya masing-masing ketika dipanggil. Kita lihat method editCustomer(); ketika button edit di klik atau menerima event, yang terjadi adalah pertama kita melakukan clone data objek pelanggan / customer menggunakan Object.assign() dan kedua kita meneruskan id customer ke properti customerId.
Properti customerId yang memiliki id dari pelanggan akan digunakan untuk melihat kesesuaian data pelanggan yang akan diedit dan menampilkan elemen input.
Kemudian pada method saveEdit(), kita membuat custom event dengan nama edit-customer dan juga value yang akan diteruskan / disiarkan.
saveEdit(customer) {
let id = this.data.id
this.$emit('edit-customer', id, customer)
this.customerId = null
},
Sedangkan pada method cancelEdit() kita juga menggunakan Object.assign() untuk mengembalikan nilai atau object yang diubah untuk kembali ke object semula ketika dibatalkan.
cancelEdit(customer) {
Object.assign(customer, this.data)
this.customerId = null;
}
Sekarang mari kita menuju ke komponen induk dan kita tambahkan event listener pada <customer-table />.
//App.vue <customer-table v-bind:customers='customers' @edit-customer="editCustomer" />
Kemudian kita tambahkan method editCustomer() ke dalam properti methods. Silahkan buat seperti dibawah ini.
editCustomer(id, data) {
this.customers = this.customers.map(function(customer) {
return customer.id === id ? data : customer;
});
}
Pada method editCustomer() diatas kita melakukan mapping dan membuat kondisional menggunakan ternary operator (kondisi ? benar : salah) untuk melihat kesesuaian antara id pelanggan yang di emit / diedit dengan id pelanggan yang ada pada daftar array customers; jika sesuai / true maka data akan diperbaharui.
Pembuatan proses edit data pelanggan sampai disini, silahkan coba untuk melakukan pengeditan.
Hapus Pelanggan
Kita masuk ke bagian terakhir dari pembuatan aplikasi CRUD kita, yaitu membuat fungsi hapus data pelanggan. Setelah Create, Read, dan Update telah selesai, sekarang tinggal bagian Delete yang akan kita kerjakan.
Mari kita buka komponen CustomerTable.vue. Kita tambahkan button delete dan emit event.
<td> <div class="text-center"> <button class="btn btn-primary mr-2" @click="editCustomer(customer)">Edit</button> <button class="btn btn-danger" @click="deleteCustomer(customer.id)">Hapus</button> </div> </td>
Tambahkan method deleteCustomer() ke dalam properti methods:
deleteCustomer(id){
this.$emit('delete-customer', id)
}
Setelah itu buka App.vue kemudian tambahkan event listener dan buat method.
<customer-table ... @delete-customer="deleteCustomer" />
Kita membuat filter pada array customers dan melakukan penghapusan berdasarkan value yang mencari nilai false untuk dihilangkan.
deleteCustomer(id) {
this.customers = this.customers.filter(function(customer) {
return customer.id !== id;
});
}
Sampai disini kita sudah bisa langsung mencobanya. Silahkan coba melakukan penghapusan pelanggan.
Selesai
Kita telah selesai mempelajari Vue dengan membuat aplikasi CRUD. Dari apa yang kita buat dan kita pelajari diatas semoga bermanfaat dan harap dimaklumi jika ada kesalahan pada penjelasan ataupun kode yang dibuat.
Namun untuk diperhatikan bahwa kita menggunakan data prototipe atau tidak dapat diubah dan ditambah yang tidak memiliki sumber pusat penyimpanan data.
Jika ingin melanjutkan dengan database dan melihat bagaimana menghubungkan aplikasi crud dengan backend dan konsumsi API, silahkan lihat Membuat backend REST API laravel 8