Event memang hal yang wajib ketika kita membuat sebuah form, dimana didalam event tersebut proses apa yang kita inginkan, dan event itu ada berbagai macam versi, entah event pada jquery, angular, itu berbeda-beda caranya, dan disini saya akan membuat salah satu event yang berada pada VueJS, siapa tau dari teman-teman disini ada membutuhkan teman-teman bisa lihat pada artikel kali ini yang berjudul cara menampilkan data dengan event di VueJS, maka dari itu jangan kemana-mana simak terus ya teman-teman.
Oke cara menampilkan data dengan event di VueJS, ini bisa di sebut Key Modifiers teman-teman bisa lihat saja langsung pada guidenya siapa tau biar tambah lebih memahami, dan jika kita lihat pada documentasinya ada beberapa maca modifiers, disini saya akan mencoba dua saja ya, jadi untuk kasus kali ini saya akan menampilkan hasil value dari sebuah inputan dan disini saya mencoba membuat dua inputan form, dimana form yang pertama jika ingin di tampilkan teman-teman harus ketikan sesuatu lau “enter” maka hasil inputan itu akan muncul di bawah, dan inputan yang kedua, teman-teman harus menambahkan “shift + enter” untuk menampilkan hasil inputannya.
//inputan form kesatu <input class="form-control" id="nama1" type="text" v-on:keyup.enter="kirim1" placeholder="Dengan Enter"> //inputan form kedua <input class="form-control" id="nama2" type="text" @keyup.shift.enter="kirim2" placeholder="Dengan Shift Enter">
jadi untuk event teman-teman bisa menggunakan “v-on” atau “@”, dan inilah tampilan kode fullnya:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h1 class="text-center">Cara Menampilkan Data dengan Event di VueJs</h1>
<div class="form-group">
<label>Nama Pertama</label>
<input class="form-control" id="nama1" type="text" v-on:keyup.enter="kirim1" placeholder="Dengan Enter">
</div>
<div class="form-group">
<label>Nama Akhir</label>
<input class="form-control" id="nama2" type="text" @keyup.shift.enter="kirim2" placeholder="Dengan Shift Enter">
</div>
<hr>
<div class="form-group">
<h2>Nama Depan: <u> {{nama1}}</u></h2>
<h2>Nama Belakang: <u>{{nama2}}</u></h2>
<hr>
<h3 v-html="namaLengkap"></h3>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var project = new Vue({
el: "#app",
data: {
nama1: "",
nama2: "",
},
methods: {
kirim1(){
var namaVar1 = document.querySelector("#nama1")
var namaVal1 = namaVar1.value
this.nama1 = namaVal1
namaVar1.value = ""
},
kirim2(){
var namaVar2 = document.querySelector("#nama2")
var namaVal2 = namaVar2.value
this.nama2 = namaVal2
namaVar2.value = ""
}
},
computed:{
namaLengkap(){
return `<strong>Nama lengkap anda: <u>${this.nama1} ${this.nama2} </u></strong>`
}
}
})
</script>
</body>
</html>
sialahkan teman-teman coba jika berhasil akan menampilkan hasil seperti ini:
dan jika teman-teman ingin lihat hasil demonya bisa lihat di sini demo.
oke saya rasa cukup sampai disini dulu belajar kita tentang cara menampilkan data dengan event di VueJS, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.