Question

我正在使用最新版本的Vuetify npm info vuetify：vuetify@2.0.15

某些元素（例如v-timeline）能够很好地显示，但是即使使用最新版本，我也无法使用v-expansion-panels：

<template>
  <v-container>
    <v-expansion-panels>
      <v-expansion-panel v-for="(item,i) in 5" :key="i">
        <v-expansion-panel-header>Item</v-expansion-panel-header>
        <v-expansion-panel-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  <v-container>
<template>

这里可能是什么问题？

Answer 1

似乎您在使用Vuetify 1.5.x和v-extension-panels 2.x（例如在demo中）时版本不匹配，这将导致类似于以下错误：

[Vue warn]: Unknown custom element: <v-expansion-panels> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

解决方案是将组件降级到1.5.x，或将Vuetify升级到2.0.x。以下特定于VExpansionPanel的详细信息可能会帮助您转换代码。

伪元素层次结构（常见）：

 + parent container
 |___+ item container 1
 |   |___ item header
 |   |___ item content
 |
 |---+ item container 2
 |   |___ item header
 |   |___ item content
 ⋮
 |___+ item container N
     |___ item header
     |___ item content

VExpansionPanel差异：

                 ‖             1.5.x                  |          2.0.x
=======================================================================================
parent container ‖  <v-expansion-panel>               | <v-expansion-panels> (plural)
item container   ‖  <v-expansion-panel-content>       | <v-expansion-panel>
item header      ‖  <template v-slot:header>          | <v-expansion-panel-header>
item content     ‖  *default slot of item container*  | <v-expansion-panel-content>

模板示例：

<!-- 1.5.x -->
<template>
  <v-expansion-panel>
    <v-expansion-panel-content
      v-for="(item,i) in 5"
      :key="i"
    >
      <template v-slot:header>
        <div>Item</div>
      </template>
      <v-card>
        <v-card-text>
          Lorem ipsum ...
        </v-card-text>
      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>
</template>

1.5.x demo

<!-- 2.0.x -->
<template>
  <v-expansion-panels>
    <v-expansion-panel
      v-for="(item,i) in 5"
      :key="i"
    >
      <v-expansion-panel-header>
        Item
      </v-expansion-panel-header>
      <v-expansion-panel-content>
        Lorem ipsum ...
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

2.0.x demo

未知的自定义元素<v-expansion-panels>？

1 个答案: