Cara Live Edit sangat berguna sekali jika kita ingin mengedit sesuatu tidak ingin ketika kita update kita tidak pindah ke halaman lain, atau file lain, jadi masih tetap disitu, dan cara itu bisa di pakai di sebuah javascript dan kali ini saya akan mencontohkanya di salah satu framework javascript, yaitu VueJS, jadi jangan kemana-mana simak terus ya.

Kasus untuk cara live edit ini adalah saya mempunyai beberapa data object dimana data itu akan kita tampilkan terlebih dahulu, dengan cara looping menggunakan vuejs juga, dan saya tempatkan di sebuah list style, dan ketika salah satu data itu saya double click akan berubah menjadi sebuah inputan text, dimana itu lah yang saya maksud live edit itu sendiri, jadi tanpa penampung form lagi, yang menampung value tersebut.

Hanya klik 2 kali, list style itu akan berubah, dan kita bisa merubah data tersebut, dan ketika crusor saya mengklik di luar form, atau biasanya di sebut event blur, sangat flexsibel bukan, oke langsung saja untuk caranya saya akan membuatnya seperti ini:

saya hanya butuh 1 file saja yaitu index.html silahkan teman-teman buat terlebih dahulu.

seperti yang teman-teman lihat saya meloopingnya menggunakan v-for, dan di li itu juga saya membuat sebuah event click dengan parameter mengambil idnya, dan tag span itu saya gunakan, untuk menampilkan nama kegiatannya, di bawahnya adalah sebuah tag input jadi sebenarnya disini saya menyediakan 2 outputan ya, jadi ketika salah satu datanya itu di click akan menghide output yang di tag span, lalu yang tag input pun tampil seperti itu, oke kita lanjut kita lihat kode Vuenya

untuk datanya teman-teman tau ya, disini saya gunakan sebuah property status dengan valuenya boolean, itu saya pakai untuk memanipulasi sebuah tag span dan tag inputnya, dan di sebuah editData saya merubah sebuah statusnya berdasarkan idnya dengan mengganti false menjadi true, oke sekarang kita lihat hasilnya:

Cara Membuat Live Edit dengan VueJS Cara Membuat Live Edit dengan VueJS Cara Membuat Live Edit dengan VueJS

jadi seperti itu ya, bisa dilihat gambarnya, jadi ketika saya mengklik datanya akan berubah menjadi tag input dan ketika event blur berjalan akan mengganti teksnya, oke saya rasa cukup sampai disini belajar kita tentang cara membuat live edit dengan VueJS, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.