vue-popper
vue-popper copied to clipboard
Do you have any plan to update `slot` with `v-slot` directive?
Popper did not work when I tried to replace slot with v-slot. slot is deprecated in Vue 2.6.0, Do you have any plan to use new syntax (v-slot)?
I looked into this a bit, I think it's related to vuejs/vue#5427. This line no longer works
The vue bug is corrected in https://unpkg.com/[email protected]/ #https://github.com/vuejs/vue/issues/9421
Still doesn't seem to work.
When I do:
<template v-slot:reference>
<div class="popover">
Hover me
</div>
</template>
It doesn't work.
Still doesn't work with new slot syntax ...
In 2.6.0, we introduced a new unified syntax (the v-slot directive) for named and scoped slots. It replaces the slot and slot-scope attributes, which are now deprecated, but have not been removed and are still documented here. The rationale for introducing the new syntax is described in this RFC.
<Popper trigger="clickToToggle" :options="{ placement: 'top' }">
<BaseButton @click="toggleMenu" slot="reference">
<template v-slot:icon>
<ChecIcon :icon="isOpen ? 'up' : 'down'" />
</template>
</BaseButton>
<BasePopover
@option-selected="handleSelectOption"
>
<!--
@slot Provide BaseOption instances here
-->
<slot />
</BasePopover>
</Popper>
I believe this is due to the fact that elm is undefined on Vnodes with new slot syntax. See this closed issue and the links to comments by Evan etc. https://github.com/vuejs/vue/issues/10450#issuecomment-526106397. Vue-popper won't work with Vue 3 unless you're passing the reference as a prop instead of using the slot.
I've rewritten the component completly in vue 3.0 composition api style, it works with the new scoped slots (v-slot) directive. I won't send a PR because i don't care about backwards compatibility. If you want a copy, let me know.
I've rewritten the component completly in vue 3.0 composition api style, it works with the new scoped slots (v-slot) directive. I won't send a PR because i don't care about backwards compatibility. If you want a copy, let me know.
I'd love to see this and have it available via npm to use.
Hello,
I'm facing the same issue.
Any news about a fix ?
Thanks in advance.