Currently, I am working on a Vue application that utilizes pimcore and twig in the backend. My task involves creating a component that can receive another component (slot) and dynamically render it with props. Here is the root structure found in viani.twig.html:
<div>
<viani-accordion>
<viani-filter-checkbox v-slot="{filterRows}"></viani-filter-checkbox>
</viani-accordion>
</div>
This snippet shows the basic setup where viani-accordion serves as the parent component while viani-filter-checkbox acts as a slot that needs to be rendered with specific props.
The VianiAccordion.vue file contains the following:
<template>
<div class="wrapper">
<AccordionTitle v-for="(item, index) in dataToRender" :item="item" :key="index">
<slot :filter-rows="item.items"></slot>
</AccordionTitle>
</div>
</template>
<script>
import AccordionTitle from './Accordion-Title';
export default {
name: "Viani-Accordion",
components: {AccordionTitle},
data() {
return {
dataToRender: [
// Data items here
]
}
},
}
</script>
Furthermore, there is a child component called Accordion-Title.vue, which renders the slot passed down through multiple components:
<template>
<div v-if="isOpen" class="child-wrapper">
<slot :filterRows="item.items"></slot>
</div>
</template>
<script>
export default {
name: "Accordion-Title",
props: {
item: {
type: Object,
default: null
}
}
}
</script>
Finally, we have the Viani-FiltersCheckbox.vue component:
<template>
<div>
<FilterCheckboxRow v-for="(item, index) in filterRows" :item="item" :key="index"/>
</div>
</template>
<script>
import FilterCheckboxRow from './FilterCheckboxRow'
export default {
name: "VianiFilterCheckbox",
components: {
FilterCheckboxRow
},
props: {
filterRows: {
type: Array,
default: function () {
return []
}
},
},
}
</script>
My main challenge lies in passing the necessary props (filterRows) to the Viani-FiltersCheckbox.vue component, which is being rendered as a slot. Despite referring to various resources such as this and this, I still struggle to identify the mistake and successfully retrieve the required props.