As a newcomer to Vue, I've dedicated the last few hours to learning how to implement conditional logic in methods and computed properties for a practice birthday component project. While exploring different approaches, I noticed some developers utilizing if/else statements within their computed properties. However, I encountered an error message stating
Unexpected side effect in "displayDays" computed propertyMy goal is to construct a component that outputs a Date of Birth (DOB) string in the format mm/dd/yyyy when selecting each individual element of the DOB through a list of options (in this case, buttons). Upon clicking on the birthday month, the corresponding list of days for that month should be displayed in the template.
That's where I hit a roadblock. Initially, I attempted to populate the days array in the method click event selectedMonth(). After some investigation, I learned that I needed to use computed properties to dynamically alter the data within the days array as desired. Despite multiple unsuccessful attempts to implement an error-free if/else statement within the computed section, I'm unsure of what I may be overlooking.
Any assistance or guidance on this matter would be greatly valued!
Below is the provided code:
<template>
<div>
(...)
</div>
</template>
<script>
export default {
name: 'birthday',
data() {
(...)
},
methods: {
selectedMonth(month) {
(...)
},
selectedDay(day) {
(...)
},
submittedYear(year) {
(...)
}
},
computed: {
displayDays() {
(...)
}
}
}
</script>
<style scoped>
(...)
</style>