From b4849707f7cd990a76061f4fa4bf71b66cae0f76 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Wed, 08 Jan 2025 13:01:02 +0100
Subject: [PATCH] v-model on Custom Components
---
11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue | 14 +++++++++-----
11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue | 18 +++++++++++++-----
2 files changed, 22 insertions(+), 10 deletions(-)
diff --git a/11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue b/11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue
index 8887c98..afdaeb6 100644
--- a/11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue
+++ b/11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue
@@ -13,14 +13,22 @@
</template>
<script>export default {
- data() {
- return {
- activeOption: null,
- };
+ props: ['modelValue'],
+ emits: ['update:modelValue'],
+ // data() {
+ // return {
+ // activeOption: null,
+ // };
+ // },
+ computed: {
+ activeOption(){
+ return this.modelValue;
+ }
},
methods: {
activate(option) {
- this.activeOption = option;
+ // this.activeOption = option;
+ this.$emit('update:modelValue', option);
}
}
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 1e57924..1e80ce5 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
@@ -49,9 +49,7 @@
</div>
<div class="form-control">
- <rating-control>
-
- </rating-control>
+ <rating-control v-model="rating"></rating-control>
</div>
<div class="form-control">
@@ -80,6 +78,7 @@
how: null,
confirm: false,
usernameValidity: 'pending',
+ rating: null,
}
},
methods: {
@@ -97,14 +96,19 @@
console.log('Checkbox: ');
console.log(this.interest);
- console.log('Radio buttons: ');
+ console.log('- Radio buttons: ');
console.log(this.how);
this.interest = [];
this.how = null;
- console.log('Confirm');
+ console.log('- Confirm:');
console.log(this.confirm);
this.confirm = false;
+
+ console.log('- Rating:');
+ console.log(this.rating);
+ this.rating = null;
+
},
validateInput() {
if (this.userName === '') {
--
Gitblit v1.8.0