I am currently developing a facet search system using VueJS. The concept is fairly straightforward:
Within a FilterGroup component lies the overarching filter logic. This component allows for several child components, such as AttributeXYZFilter, to provide conditions that the FilterGroup will use to filter through a set of items.
An example implementation of this system would resemble the following:
<template>
<FilterGroup :items="items">
<ABCFilter/>
<XYZFilter/>
<AnotherFilter/>
</FilterGroup>
</template>
The issue at hand pertains to the rendering of the filter components by the FilterGroup in a specific layout. Furthermore, the FilterGroup should provide additional data to these filter components through props.
In order to prevent unnecessary dependencies, FilterGroup shouldn't be aware of which filters are being rendered. Each filter must adhere to a common specification/interface (implemented via mixins) and have its own unique UI template.
How can this architecture be effectively implemented?
Initially, I experimented with slots, but struggled to customize the rendering of child components. When no slot is utilized, this.$children remains empty, making it difficult to determine which filters to render.
One potential solution could involve passing the filters like so:
<template>
<FilterGroup :items="items" :filters="['ABCFilter', 'XYZFilter']/>
</template>
In this scenario, FilterGroup could dynamically import and display the filter components while also transmitting additional data. However, I believe that this approach may result in a less intuitive and user-friendly API.
Is there an alternative method that would better suit this situation?