CODEWITHSUNDEEP
javascriptvue.jsvuejs3
user4254398
user4254398

Reputation: 383

Vue.js "$slots.default()[0].el" is null when passing dynamic slot with v-for

I'm trying to access HTMLElement of dynamic slot that passed by v-for but el is always 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);
  }
.
.

but el is always null but when I pass it hardcoded like below el is available

<prod>
   <span>
     <div>a</div><div>b</div>
   </span>
</prod>

I mean how I can access HTMLElement of dynamic slot ?

Upvotes: 3

Views: 1009

Answers (1)

user4254398
user4254398

Reputation: 383

its look like there is no solution for this But we can use refs

<div ref="main">
  <slot></slot>
</div>
.
.
// and we can access the dom with :
this.$refs.main

also there is updated method that you can monitor changes of slots

Upvotes: 2

Related Questions