I have a vue component with 2 slots (both are filled) and i need to get the position relatively to the page (using getBoundingClientRect method for example), but i can't get access to watchable slot even with refs. Is there any way to do that without this.$el.querySelector method?
<template>
<div class="watchable-container">
<slot name="watchable" ref="refWatchable"></slot>
<div class="bubble-container">
<div class="bubble">
<slot name="content">
</slot>
</div>
<div class="bubble-tail"></div>
</div>
</div>
</template>
<script>
export default {
name: "BubblePopover",
mounted() {
console.log(this.$slots)
console.log(this.$refs);
},
}
</script>
The this.$slots member should work.
this.$slots.watchable
// or
this.$slots.watchable.$el
Try using nextTick in your mounted function to give slot time to render.
mounted() {
nextTick(()=>{
// your code here
})
}
You can also add an ID from your slot content add access it by getElementById
Another options is to use the composition API plugin and then access content from the ref.