Javascript 使用组件渲染每个Vuetify扩展面板项

我试图使用Vuetify的

v-expansion-panel

组件（也称为accordion）为列表中的每个任务呈现一个面板。父组件的模板是：

<div v-if="tasks.length">
  <v-expansion-panels>
    <task
      v-for="(task, index) in tasks"
      :task="task"
      :key="index"
    />
  </v-expansion-panels>
</div>

在单个组件中呈现标题和正文对我来说很方便，因为它们在很大程度上依赖于相同的数据。但是，我不喜欢将扩展面板的标记拆分为两个不同组件的方式。因此，如果我对子

任务
组件进行单元测试，我会得到一个警告：

[Vuetify]必须在v型扩展面板内使用v型扩展面板组件

是否有一种方法可以将所有扩展面板标记移动到父组件中，但在子
任务
组件中为
v-expansion-panel-header
和
v-expansion-panel-content
生成内容？
为什么不将所有扩展面板添加到一起，并在任务中生成内容。vue执行v-for

<task :tasks="tasks" />



Task.vue

 <template>
    <v-expansion-panels 
      <v-expansion-panel
         v-for="(task, index) in tasks"
         :task="task"
         :key="index">>
    
        <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>
    </v-expansion-panels>
    </template>

您可以使用渲染函数在Vue 2中拥有多个根元素。它使用起来更为棘手，但它会起作用。看一看

或者，您也可以使用
vue片段
组件（链接到）为您这样做：


我在两个组件中都有一个根元素，因为这样我就必须在一个组件中管理所有任务的数据，这将非常混乱，我无法理解您的担忧。拥有呈现任务的组件被视为最佳实践。即使对于单元测试，您也可以轻松地安装和测试组件。
 <template>
    <v-expansion-panels 
      <v-expansion-panel
         v-for="(task, index) in tasks"
         :task="task"
         :key="index">>
    
        <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>
    </v-expansion-panels>
    </template>