I want to generate an component for dropdown display. I wanted to use slot for display the content at the higher level.
I implemented a following structure. I can display component and manage events. But props changes at "componentA" not trigger watch event on ChildComponent which displays at "Dropdown Manager Component". When i debug "Dropdown Manager Component", it still contains old props of slot. It still uses first id value. I needed to recall showPopup func.
Did you have any recommendation or link that i can follow to fix the issue. I try to use watch slot changes but not trigger when id changed at "ChildComponent".
Thanks,
const slots = useSlots();
watch(()=>slots,()=>{
// call function
})
Example componentA in app
<template>
...
<Dropdown :options="tmpoptions">
<template v-for="tmpoption in tmpoptions" :key="tmpoption.key" v-slot:[tmpoption._id]>
<ChildComponent :id="id"></ChildComponent>
</template>
</Dropdown>
...
<template/>
<script>
const props = defineProps({
id: {type: String}
})
</script>
Dropdown Component:
<template>
<button @click="showPopup">
Click
</button>
</template>
<script>
const slots = useSlots();
const props = defineProps({
options: {type: Array<any>}
})
showPopup(){
mainStore.updateStateItem({
options: props.options.map(x=>{
return {...x, slot: slots[x._id]};
})
});
}
</script>
Dropdown Manager Component:
<template>
<div v-for="displayItem in displayItems">
<component v-if="displayItem.slot" :is="displayItem.slot"></component>
<span v-else>{{displayItem.key}}</span>
</div>
</template>
<script>
const displayItems= ref();
watch(() => mainStore.stateItem,(val) => {
updateItems();
});
updateItems(){
displayItems.value=mainStore.stateItem;
}
</script>
Top Level:
<App>
<OtherComp/>
<DropdownManager/>
</App>
