Is there a way to access the HTMLElement of a dynamically passed slot when using v-for? I'm having trouble as the element (el) always seems to be empty.
app.vue :
<template>
<div id="app">
<prod>
<span>
<div v-for="item in items">{{item.title}}</div>
</span>
</prod>
</div>
</template>
data: () => {
return { items: [{ title: '1' }, { title: '2' }] };
}
prod.vue :
<template>
<slot></slot>
</template>
mounted() {
console.log(this.$slots.default()[0].el);
}
However, the el property is always null. Interestingly, when I hardcode the slot elements like below, the el property becomes available:
<prod>
<span>
<div>a</div><div>b</div>
</span>
</prod>
I am looking for a way to access the HTMLElement of dynamic slots. Does anyone have a solution?