Can't use other components inside BadgerAccordion

[sayhicoelho]

Hi guys!

I need to create some themes for badger-accordion using my own components.

Example:

<badger-accordion>
  <my-custom-accordion-item>
    <template slot="header">Nice header</template>
    <template slot="content">Nice content</template>
  </my-custom-accordion-item>
</badger-accordion>

MyCustomAccordion.vue

<template>
  <badger-accordion-item>
    <template slot="header">
      <slot name="header" />
    </template>
    <template slot="content">
      <div class="custom-content-style">
        <slot name="content" />
      </div>
    </template>
  </badger-accordion-item>
</template>

<style scoped>
  .custom-content-style {
    background-color: red;
  }
</style>

<script>
...

When I try to click on the accordion item, nothing happens.

What is missing?

[vanderb]

Hi @sayhicoelho, I think you dont have to declare the <template name="xxx"></template> in your Component. Just insert the <slot name="xxx"></slot> wrapped with element of your choice.

<template>
  <badger-accordion-item>
    <div class="header">
      <slot name="header" />
    </div>
    <div>
      <div class="custom-content-style">
        <slot name="content" />
      </div>
    </div>
  </badger-accordion-item>
</template>

Please let me know, if that works.

[sayhicoelho]

Thank you for the feedback @vanderb!

But still not working.

Using custom components as an accordion item would be nice.

[vanderb]

Hi @sayhicoelho you are totally right.

In the watcher-method this.$children be used to change states. This can not work, if $children is not the badger-accordion-item component.

I will take care about this Problem in next Release. But I am sorry I can not help you yet.