Within my code, I have a simple file structured like this:
<script setup>
import { ref } from 'vue'
import TheHeader from '@/components/_headerbar/TheHeader.vue'
import TheSidebar from '@/components/_sidebar/TheSidebar.vue'
const sidebarState = ref(false)
const onSidebarToggle = () => {
sidebarState.value = !sidebarState.value
}
</script>
<template>
<QLayout view="hHh lpR fFf">
<TheHeader @toggle-sidebar="onSidebarToggle" />
<TheSidebar :sidebar-state="sidebarState.value" />
<QPageContainer>
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>
</QPageContainer>
</QLayout>
</template>
In this situation, the variable sidebarState updates correctly each time the event toggle-sidebar is triggered. However, for some reason, the prop that receives its value does not update and I'm unsure why.
Specifically, the issue lies within the TheSidebar.vue file:
<script setup>
const props = defineProps({
sidebarState: {
type: Boolean,
default: true
}
})
</script>
<template>
<QDrawer
:model-value="props.sidebarState"
show-if-above
side="left"
bordered
>
content
</QDrawer>
</template>
Upon debugging, it becomes apparent that the sidebarState prop in the TheSidebar.vue file never changes, even though the data prop sidebarState in TheHeader.vue adjusts perfectly fine. This discrepancy leaves me puzzled about what is going wrong.
I am at a loss as to what mistake I may be making. Any insights would be greatly appreciated.