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/RatingControl.vue | 68 ++++++++++++++++++++++++++++++++++
1 files changed, 68 insertions(+), 0 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
new file mode 100644
index 0000000..afdaeb6
--- /dev/null
+++ b/11 - Forms/xno-forms-01-starting-setup/src/components/RatingControl.vue
@@ -0,0 +1,68 @@
+<template>
+ <ul>
+ <li :class="{ active: activeOption === 'poor' }">
+ <button type="button" @click="activate('poor')">Poor</button>
+ </li>
+ <li :class="{ active: activeOption === 'average' }">
+ <button type="button" @click="activate('average')">Average</button>
+ </li>
+ <li :class="{ active: activeOption === 'great' }">
+ <button type="button" @click="activate('great')">Great</button>
+ </li>
+ </ul>
+</template>
+
+<script>export default {
+ props: ['modelValue'],
+ emits: ['update:modelValue'],
+ // data() {
+ // return {
+ // activeOption: null,
+ // };
+ // },
+ computed: {
+ activeOption(){
+ return this.modelValue;
+ }
+ },
+ methods: {
+ activate(option) {
+ // this.activeOption = option;
+ this.$emit('update:modelValue', option);
+ }
+ }
+
+}
+</script>
+
+<style scoped>
+.active {
+ border-color: purple;
+}
+
+.active button {
+ color: purple;
+}
+
+ul {
+ list-style: none;
+ margin: 0.5rem 0;
+ padding: 0;
+ display: flex;
+}
+
+li {
+ margin: 0 1rem;
+ border: 1px solid #ccc;
+ padding: 1rem;
+ display: flex;
+ align-items: center;
+}
+
+button {
+ font: inherit;
+ border: none;
+ background-color: transparent;
+ cursor: pointer;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0