Assume I have a file named foo.vue, which I import into the parent component as components called a and b, and they are displayed based on a variable called show.
When switching between components a and b in the parent without setting show = null, various child state errors occur.
To resolve this issue, I tried setting show to null before assigning it to the respective Vue component like this:
this.show = null
this.show = a // or b
However, this approach did not work as expected. The component ended up retaining the state of the previous one, even for props that were not updated.
I managed to make it work by using a timeout:
toggle(show){
this.show = null
let that = this
setTimeout(() => {
that.show = show
}, 200)
}
Is there a more elegant solution available? The current method does not seem very clean to me.
It seems that what happens within the child component should not affect the switch triggered by the parent; it should start fresh and rebuild. However, in my case, this does not happen. Are there any factors causing this issue?
Does setting to null trigger a hard refresh somehow?
My child component is complex with AJAX calls to retrieve a list but nothing extraordinary.
Parent Component Code:
<template>
<div id="userAreaEventWrapper">
<div class="userarea-submenu">
<div v-on:click="toggle(comps.eventForm)" class='button-base-out'>
<div :class="isSelected(comps.eventForm)">
New Event
</div>
</div>
<div v-on:click="toggle(comps.events)" class='button-base-out'>
<div :class="isSelected(comps.events)">
My Events
</div>
</div>
<div v-on:click="toggle(comps.eventsAttending)" class='button-base-out'>
<div :class="isSelected(comps.eventsAttending)">
Attending
</div>
</div>
</div>
<EventForm v-if="show === comps.eventForm" @created="toggle(comps.events)" :mode="'create'"></EventForm>
<Events ref="events" :mode="currentMode" v-if="show === comps.events" @noResults="toggle(comps.eventForm)" :attending="false"></Events>
<AttendingEvents ref="attending" :mode="'home'" v-if="show === comps.eventsAttending" :attending="true"></AttendingEvents>
</div>
</template>
<script>
const EventForm = () => import( './event-form.vue')
const Events = () => import( './events.vue')
const AttendingEvents = () => import( './events.vue')
export default {
name: "UserEventComponent",
components:{
EventForm,
Events,
AttendingEvents
},
data(){
return{
comps:{
eventForm:1,
events:2,
eventsAttending:3
},
show: 2,
currentMode:'user',
}
},
methods: {
toggle(show){
this.show = null
let that = this
setTimeout(() => {
that.show = show
}, 200)
},
isSelected(n){
return n === this.show ? 'button-base-in button-base-in-hover' : 'button-base-in'
},
},
}
</script>
Child Component Code:
Fetching API data in mounted():
mounted() {
this.currentMode = this.mode
if(this.resumeData && this.resumeData.slug){
this.selectedSlug = this.resumeData.slug
} else {
this.resume(this.resumeData)
this.getEvents()
}
}