Access and declare vueJs component inside other component slot-CodePudding

I'm trying to declare and access an vue component inside a component slot. The modal component will be creates several time and there it has to have an unique name but I don't no how I do that inside the slot. using Laravel blade and vueJs

<template>
    <table>
        <thead>
            <slot name="head"/>
        </thead>
        <tbody>
        <tr v-for="item in items" :key="item.id">
            <slot name="line" v-bind:item="item" />
        </tr>
        </tbody>
    </table>
</template>

<list-component ref="teamMembers">
    <template v-slot:head>
        <tr>
            <th>Name</th>
            <th>Email-address</th>
            <th>Role</th>
        </tr>
    </template>


    <template v-slot:line="slotProps">
        <td>
            @{{ slotProps.item.name }}
        </td>
        <td>
            @{{ slotProps.item.email }}
        </td>
        <td>
            @{{ slotProps.item.role }}
        </td>

        <td>
            <button @click="$refs.deleteItemModal@{{ slotProps.item.id }}">
                Delete
            </button>
        </td>

        <modal-component ref="deleteItemModal@{{ slotProps.item.id }}">
            
        </modal-component>
    </template>
</list-component>

How can declare and call modal component?

If I use it like this

<button @click="$refs.deleteItemModal">

and

ref="deleteItemModal"

it works but gives me always the same component.

Please advise me how I can create an unique ref to create something like this 'deleteItemModal' slotProps.item.id

CodePudding user response：

You can try like this:

<modal-component :ref="'deleteItemModal'   slotProps.item.id">
</modal-component>

Static value should be covered with quotation mark and can use to concat any dynamic value with the string like in javascript.

CodePudding user response：

Thanks to Urja I have it working.

<modal-component :ref="'deleteItemModal'   slotProps.item.id">
</modal-component>

<button @click="deleteItem(slotProps.item.id)">

deleteItem(itemId) {
    this.$root.$refs.['deleteItemModal'   itemId].closeModal();
},