Utilizing Vuetify's v-expansion-panel component (also known as an accordion), I am attempting to display one panel for each task in a list. The template of the parent component is as follows:
<div v-if="tasks.length">
<v-expansion-panels>
<task
v-for="(task, index) in tasks"
:task="task"
:key="index"
/>
</v-expansion-panels>
</div>
The child task component then renders the content of each panel like this:
<template>
<v-expansion-panel>
<v-expansion-panel-header>
<!-- render panel header content -->
</v-expansion-panel-header>
<v-expansion-panel-content>
<!-- render panel body content -->
</v-expansion-panel-content>
</v-expansion-panel>
</template>
I find it convenient to display the header and body in a single component since they rely on the same data. However, I am not fond of having the markup for the expansion panels split between two components. As a result, when I perform unit tests on the child task component, I receive a warning message:
[Vuetify] The v-expansion-panel component must be used inside a v-expansion-panels
Is there a way for me to consolidate all the expansion panel markup into the parent component while still generating the content for v-expansion-panel-header and v-expansion-panel-content in the child task component?