From 0adb44f6a15591ed98fa92ddae6fccf6ffd52373 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Wed, 08 Jan 2025 11:05:31 +0100
Subject: [PATCH] v-model with Checkboxes and Radiobuttons
---
11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue | 31 ++++++++++++++++++++++++-------
1 files changed, 24 insertions(+), 7 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 18cbc67..65088e9 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
@@ -19,32 +19,36 @@
<div class="form-control">
<h2>What are you interested in?</h2>
<div>
- <input id="interest-news" name="interest" type="checkbox" />
+ <input id="interest-news" name="interest" type="checkbox" value="news" v-model="interest" />
<label for="interest-news">News</label>
</div>
<div>
- <input id="interest-tutorials" name="interest" type="checkbox" />
+ <input id="interest-tutorials" name="interest" type="checkbox" value="tutorials" v-model="interest" />
<label for="interest-tutorials">Tutorials</label>
</div>
<div>
- <input id="interest-nothing" name="interest" type="checkbox" />
+ <input id="interest-nothing" name="interest" type="checkbox" value="nothing" v-model="interest" />
<label for="interest-nothing">Nothing</label>
</div>
</div>
<div class="form-control">
<h2>How do you learn?</h2>
<div>
- <input id="how-video" name="how" type="radio" />
+ <input id="how-video" name="how" type="radio" value="video" v-model="how" />
<label for="how-video">Video Courses</label>
</div>
<div>
- <input id="how-blogs" name="how" type="radio" />
+ <input id="how-blogs" name="how" type="radio" value="blogs" v-model="how" />
<label for="how-blogs">Blogs</label>
</div>
<div>
- <input id="how-other" name="how" type="radio" />
+ <input id="how-other" name="how" type="radio" value="other" v-model="how" />
<label for="how-other">Other</label>
</div>
+ </div>
+ <div class="form-control">
+ <input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
+ <label for="confirm-terms">Agree to terms of use?</label>
</div>
<div>
<button>Save Data</button>
@@ -59,6 +63,9 @@
userName: '',
userAge: null,
referrer: 'wom',
+ interest: [],
+ how: null,
+ confirm: false,
}
},
methods: {
@@ -69,11 +76,21 @@
console.log(this.userAge); //number
console.log(this.$refs.inputAge.value); //string
console.log(18);
+ this.userAge = null;
console.log('referrer: ' + this.referrer);
this.referrer = 'wom';
- this.userAge = null;
+ console.log('Checkbox: ');
+ console.log(this.interest);
+ console.log('Radio buttons: ');
+ console.log(this.how);
+ this.interest = [];
+ this.how = null;
+
+ console.log('Confirm');
+ console.log(this.confirm);
+ this.confirm = false;
}
}
--
Gitblit v1.8.0