Nebucatnetzer
/
vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

rewrite the control to use props and emits

This commit is contained in:
Andreas Zweili 2021-02-19 18:13:44 +01:00
parent 1f5a470e48
commit 5ac696e629
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
2021-02-08 2024 forms-01-starting-setup/src/components/RatingControl.vue
View File

@ -14,29 +14,26 @@
<script> <script>
export default { export default {
data() { props: ['modelValue'],
return { emits: ['update:modelValue'],
activeOption: null
};
},
computed: { computed: {
poorIsActive() { poorIsActive() {
if (this.activeOption === 'poor') { if (this.modelValue === 'poor') {
return 'active'; return 'active';
} else { } else {
return ''; return '';
} }
}, },
averageIsActive() { averageIsActive() {
if (this.activeOption === 'average') { if (this.modelValue === 'average') {
return 'active'; return 'active';
} else { } else {
return ''; return '';
} }
}, },
greatIsActive() { greatIsActive() {
if (this.activeOption === 'great') { if (this.modelValue === 'great') {
return 'active'; return 'active';
} else { } else {
return ''; return '';
@ -46,7 +43,7 @@ export default {
methods: { methods: {
activate(option) { activate(option) {
this.activeOption = option; this.$emit('update:modelValue', option);
} }
} }
}; };

9
2021-02-08 2024 forms-01-starting-setup/src/components/TheForm.vue
View File

@ -81,7 +81,9 @@
/> />
<label for="how-other">Other</label> <label for="how-other">Other</label>
</div> </div>
<div class="form-control"><form-control></form-control></div> <div class="form-control">
<form-control v-model="rating"></form-control>
</div>
<div class="form-control"> <div class="form-control">
<input <input
type="checkbox" type="checkbox"
@ -111,7 +113,8 @@ export default {
referrer: 'wom', referrer: 'wom',
interest: [], interest: [],
how: null, how: null,
confirmTerms: false confirmTerms: false,
rating: null
}; };
}, },
methods: { methods: {
@ -128,6 +131,8 @@ export default {
this.how = null; this.how = null;
console.log(this.confirmTerms); console.log(this.confirmTerms);
this.confirmTerms = false; this.confirmTerms = false;
console.log(this.rating);
this.rating = null;
} }
} }
}; };