Get v-slot's value - vue.js

Question

I got an component like this:
<template>
<Popover v-slot="{ open }" :ref="`${name}-parent`">
<div>
<PopoverButton :ref="name">
<div>
<slot name="buttoncontent"></slot>
</div>
<ChevronDownIcon/>
</PopoverButton>
</div>
<transition>
<PopoverPanel>
<slot name="popovercontent"></slot>
</PopoverPanel>
</transition>
</Popover>
</template>
<script>
import {Popover, PopoverButton, PopoverPanel} from '#headlessui/vue'
import {ChevronDownIcon} from '#heroicons/vue/solid'
export default {
name: 'PopoverMenu',
props: {
name: {
type: String,
},
title: {
type: String,
default: ''
},
},
components: {
Popover,
PopoverButton,
PopoverPanel,
ChevronDownIcon,
},
setup () {
return {}
},
watch: {
'$route' () {
// this.$refs[this.name] ... do fancy stuff on route change here
},
},
mounted () {
console.log(this.$refs[`${this.name}-parent`])
}
}
</script>
Now I'd like to change the open state depending on the change of the route. Ergo: If the user clicks a link the popover should close.
The Popover, PopoverButton and PopoverPanel are provided by headlessui and only offer the open slot just within the component. My idea was to access the open property and change it manually.

Answer 1

My idea was to access the open property
Accessing the open property is easy, in a way you already have it in your template. If you want to hold on to it (e.g. keep a reference to open so that you can use it some time later), you can convert your slot content into a component and receive open as the props.
and change it manually.
However, this is prohibited. The moment you try to mutate the open you will get a warning saying it is readonly. In general, properties are always readonly, this is enforced by vue. Scoped slots are just anonymous components very similar to lambda functions, and the open variable is just one of the properties for the slot.
Ideally the library you are using should expose not just an open state but also two more methods (open() and close()) to the slot. Unfortunately, not all libraries are built that thoughtful.
You can try to move the focus to some other elements when your route changes and see if that can close the popover. If not, you can manually implement the vue wrapper for popover. This is something I would do btw, for the simple use cases (i.e. pop some panel), it is trivial to implement using popover.