알 수 없는 사용자 지정 요소?

알 수 없는 사용자 지정 요소?

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>

여기서 문제가 될 수 있는 것은 무엇입니까?

Vuetify 1.5.x 를 사용하여 버전이 일치하지 않는 것 같습니다.v-extension-panels2.x(이 데모와 같음)로 인해 다음과 같은 오류가 발생합니다.

[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 데모

<!-- 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 데모

언급URL : https://stackoverflow.com/questions/57831539/unknown-custom-element-v-expansion-panels