ref and el is null from slot-item

[gregorvoinov]

Hi, I want to build a breadcrumb like this

<v-breadcrumb>
    <v-breadcrumb-item>Home</v-breadcrumb-item>
    <v-breadcrumb-item>Hauptgerichte</v-breadcrumb-item>
    <v-breadcrumb-item>Pizzas</v-breadcrumb-item>
    <v-breadcrumb-item>Diavolo</v-breadcrumb-item>
</v-breadcrumb>

in the breadcrumb file I want to loop all slot items and set different stylings and attributes on the elements

    // template
    <nav aria-label="breadcrumb">
        <ol>
            <slot/>
        </ol>
    </nav>

    // script setup
    const slots = useSlots()        
    slots.default().forEach((slot, index) => {
        console.log(slot.ref) // null
        console.log(slot.el) // null
     })

in the breadcrumb-item file I have set ref to the element li

    // template
    <li
        ref="crumb"
        class="breadcrumb-item"
        :class="classes"
    >
        <v-icon :icon="icon" class="icon mx-1 md:mx-3" aria-hidden="true" />
        <component :is="is_component()">
            <slot />
        </component>
    </li>
    
   // script setup
   const crumb = ref()

Is there a way to get the ref or el of a slot-item?

[liulinboyi]

I think you can use like this:

playground demo

before get, you should use defineExpose.

why use ref.i?

The type references are as follows

ref: VNodeNormalizedRef | null; ->

-> type VNodeNormalizedRef = VNodeNormalizedRefAtom | VNodeNormalizedRefAtom[] ->

-> type VNodeNormalizedRefAtom = { i: ComponentInternalInstance; r: VNodeRef; k?: string; f?: boolean; }; ->

-> ComponentInternalInstance ->

-> interface ComponentInternalInstance { ... exposed: Record<string, any> | null; ... }

[gregorvoinov]

hmm I don't think I get it ;/ demo is to confusing for me...

so on my item component I need to expose the instance?

//breadcrumb-item

defineExpose({ 
  instance: getCurrentInstance()
})

and in my parent component I can read the expose?

//breadcrumb

slots.default().forEach((slot, index) => {
    console.log(slot.ref.i.expose.instance)
})

and in my page I can just use it like this?
//page

<v-breadcrumb>
    <v-breadcrumb-item>Home</v-breadcrumb-item>
    <v-breadcrumb-item>Hauptgerichte</v-breadcrumb-item>
    <v-breadcrumb-item>Pizzas</v-breadcrumb-item>
    <v-breadcrumb-item>Diavolo</v-breadcrumb-item>
</v-breadcrumb>

??

[chenxch]

You need to add a ref for the child component on the parent side, not inside the child component.

[gregorvoinov]

ah thanks that works, but if I have to place a prop on each element, than it's easier to just put on the last element the prop "currentPage" or "active or something else

[gregorvoinov]

ok found another way

my solution if anyone maybe needs it or can give me feedback if this is a good approach or not 😃.

in the parent breadcrumb I provide a function to add a state from the child and update the state in the parent

    const crumbs_active = ref([])
    provide ('crumbs_active_add', crumbs_active_add )
    function crumbs_active_add(active) {
        crumbs_active.value.push(active)
    }
    // set the active state of the last element to true
    nextTick(() => {
        crumbs_active.value.slice(-1)[0].value = true
    })

  const active = ref(false)
  const active_add = inject('crumbs_active_add')
  active_add(active)
  
  // active is now true and can be used to modify eg.: the tag
  function is_component(){
        return active.value ? 'span' : 'router-link' 
    }