Vue.js'te bir formun gönderilme (submit) olayını dinlemek için @submit direktifini kullanabilirsiniz. Bu direktif, bir form gönderildiğinde belirtilen bir işlevi çalıştırır. İşte bir örnek:
<template>
<form @submit.prevent="handleSubmit">
<label>
Kullanıcı Adı:
<input type="text" v-model="username">
</label>
<button type="submit">Gönder</button>
</form>
</template>
<script>
export default {
data(
) {
return {
username: ''
};
},
methods: {
handleSubmit(
) {
// Form gönderildiğinde burası çalışacak
console.log('Form Gönderildi! Kullanıcı Adı:', this.username);
// Formun sunucuya gönderilmesi veya diğer işlemler burada gerçekleştirilebilir
}
}
}
</script>
Bu örnekte, <form> etiketi @submit.prevent direktifi ile handleSubmit yöntemine bağlanmıştır. @submit.prevent direktifi, formun varsayılan davranışını engellemek için event.preventDefault() yöntemini çağırır. Böylece sayfanın yeniden yüklenmesi veya formun sunucuya gönderilmesi gibi varsayılan davranışlar engellenir.
handleSubmit yöntemi, form gönderildiğinde çağrılır ve formdaki girdileri işleyebilir. Bu örnekte, formun gönderilmesiyle birlikte konsola kullanıcı adını yazdırır, ancak gerçek uygulamada formun sunucuya gönderilmesi veya başka işlemler de burada gerçekleştirilebilir.
Bu şekilde, Vue.js kullanarak bir formun gönderme olayını dinleyebilir ve gerekli işlemleri gerçekleştirebilirsiniz.