Question

我刚刚开始使用VueJS和Vuetify，所以这可能是一个非常基本的错误..

我正在尝试使用vuetify扩展面板组件：https://vuetifyjs.com/components/expansion-panels

基本上我想定义自己的组件以用作 v-expansion-panel-content ，但我无法使其正常工作。

我能做的工作是定义2个组件，一个用于标题，另一个用于内容，并在 v-expansion-panel-content

中使用它们

但是当我尝试将所有内容封装在一个组件中时，扩展面板会显示标题，但不会展开以显示项目内容。

提前致谢。

CodePen：https://codepen.io/arcard/pen/YEJrZd

HTML：

    <v-expansion-panel-content>
      <div slot="header">Item - without use of component - works OK</div>
      <v-card>
        <v-card-text class="grey lighten-3">Lorem ipsum dolor sit amet.</v-card-text>
      </v-card>
    </v-expansion-panel-content>

    <v-expansion-panel-content>
      <vc-prod-header slot="header"></vc-prod-header>
      <vc-prod-content></vc-prod-content>
    </v-expansion-panel-content>

    <!-- this one doesn't work -->
    <vc-exp-panel-comp></vc-exp-panel-comp>
  </v-expansion-panel>
</div>

JS：

Vue.component('vc-prod-header',{
  template: `
    <div>Item - using 2 components: one for the header and one for the content - works OK</div>
  `
});

Vue.component('vc-prod-content',{
  template: `
      <v-card>
        <v-card-text class="grey lighten-3">component 2:  content</v-card-text>
      </v-card>
  `
});

Vue.component('vc-exp-panel-comp',{
  template: `
    <v-expansion-panel-content>
      <div slot="header">component title - this one will not expand to show the content</div>
      <v-card>
        <v-card-text class="grey lighten-3">component body: this is now showing</v-card-text>
      </v-card>
    </v-expansion-panel-content>
  `
});

new Vue({
  el: '#example'
})

Vuetify：如何在Vuetify扩展面板组件中使用我自己的组件

0 个答案: