หากต้องการ handle event เมื่อกดปุ่ม Enter บนคีย์บอร์ดสามารถทำได้ง่ายมากใน Vue เพียงแค่ใช้คำสั่ง @keyup.enter=”function()”
แบบปกติทั่วไปใช้ jQuery
//html<form name="login-form">
username: <input type="text" name="username" />
password: <input type="password" name="password" />
<button type="submit">submit</button>
</form>
//javascript $("form[name=login-form]").on('submit', (event)=>{
event.preventDefault()
//Validate form
//Call Api
})
แบบ Vue.js
<template>
<form @keyup.enter="isValidatedForm && onLogin($event)">
username: <input type="text" name="username" v-model="form.username" />
password: <input type="password" name="password" v-model="form.password" />
<button :disabled="!isValidatedForm" @click="onLogin" >submit</button>
</form>
</template><script>
export default {
data() {
return {
form: {
username: "",
password: "",
}
}
},
computed: {
isValidatedForm() {
return this.form.username != '' && this.form.password != '';
},
},
methods: {
onLogin(event) {
event.preventDefault()
//Call Api
}
}
}
</script>
