From 326c8c2a1c3cd899b5fcef10d07f4fae3788d005 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Wed, 08 Jan 2025 10:29:22 +0100
Subject: [PATCH] v-model and inputs
---
11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue | 25 +++++++++++++++++++++----
1 files changed, 21 insertions(+), 4 deletions(-)
diff --git a/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue b/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
index 826a45d..be9feed 100644
--- a/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
+++ b/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
@@ -1,8 +1,8 @@
<template>
- <form>
+ <form @submit.prevent="submitForm">
<div class="form-control">
<label for="user-name">Your Name</label>
- <input id="user-name" name="user-name" type="text" />
+ <input id="user-name" name="user-name" type="text" v-model="userName" />
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
@@ -52,6 +52,23 @@
</form>
</template>
+<script>
+export default {
+ data() {
+ return {
+ userName: '',
+ }
+ },
+ methods: {
+ submitForm() {
+ console.log('Username: ' + this.userName );
+ this.userName = '';
+ }
+ }
+
+}
+</script>
+
<style scoped>
form {
margin: 2rem auto;
@@ -94,8 +111,8 @@
margin-right: 1rem;
}
-input[type='checkbox'] + label,
-input[type='radio'] + label {
+input[type='checkbox']+label,
+input[type='radio']+label {
font-weight: normal;
}
--
Gitblit v1.8.0