使用一個組件來渲染每個 Vuetify 擴展面板項

Question

我正在嘗試使用 Vuetify 的v-expansion-panel組件（AKA 手風琴）為列表中的每個任務呈現一個面板。 父組件的模板是：

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

然后子task組件渲染每個面板的內容，如下所示：

<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>

在單個組件中渲染 header 和 body 對我來說很方便，因為它們在很大程度上依賴於相同的數據。 但是，我不喜歡將擴展面板的標記拆分為兩個不同組件的方式。 因此，如果我對子task組件進行單元測試，我會收到警告：

[Vuetify] v-expansion-panel 組件必須在 v-expansion-panels 內部使用

有沒有辦法可以將所有擴展面板標記移動到父組件中，但在子task組件中生成v-expansion-panel-header和v-expansion-panel-content ？

Answer 1

為什么不直接將所有擴展面板添加在一起並在 task.vue 中執行 v-for？

<task :tasks="tasks" />

任務.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>

Answer 2

您可以使用渲染函數在 Vue 2 中擁有多個根元素。 使用起來更棘手，但它會起作用。 看看這個鏈接。

或者，您可以使用vue-fragment組件（鏈接到npm 頁面）為您執行此操作，如下所示：

<template>
  <fragment>
    <v-expansion-panel-header>
    <!-- render panel header content -->
    </v-expansion-panel-header>

    <v-expansion-panel-content>
    <!-- render panel body content -->
    </v-expansion-panel-content>
  </fragment>
</template>