roszpun / vue-collapse

Vue.js 2 plugin allowing developers to create very custom accordion lists.
MIT License
79 stars 25 forks source link

Custom wrapper component breaks functionality #8

Open silvbaumann opened 6 years ago

silvbaumann commented 6 years ago

I added a custom wrapper component around v-collapse-wrapper and everything works fine except the functionality, that only one item is open. Is there a workaround for this?

The wrapper looks like this:

<v-collapse-group :onlyOneActive="true">
  <c-collapse
    v-for="item in collapsible"
    :active="item.active"
    :key="item.id"
    :title="item.title">
    {{ item.content }}
  </c-collapse>
</v-collapse-group>

And inside the component:

<template>

  <v-collapse-wrapper :active="active" :class="b({expanded: isExpanded})">

    <div v-collapse-toggle :class="b('toggle')" @click="setState">
      <e-icon :class="b('icon')" :inline="true" icon="i-plus"/>
      {{ title }}
    </div>

    <div v-collapse-content :class="b('content')">
      <div :class="b('inner')">
        <slot></slot>
      </div>
    </div>

  </v-collapse-wrapper>

</template>

<script>
  export default {
    name: 'c-collapse',
    // components: {},
    // mixins: [],

    props: {
      /**
       * Sets item to active
       */
      active: {
        type: Boolean,
        required: false,
        default: false,
      },

      /**
       * Title of the toggle
       */
      title: {
        type: String,
        required: true,
      },
    },

    data() {
      return {
        isExpanded: false
      };
    },

    // computed: {},
    // watch: {},

    // beforeCreate() {},
    // created() {},
    beforeMount() {
      if (this.$props.active) this.isExpanded = true;
    },
    // mounted() {},
    // beforeUpdate() {},
    // updated() {},
    // activated() {},
    // deactivated() {},
    // beforeDestroy() {},
    // destroyed() {},

    methods: {
      /**
       * Sets and emits the current state
       */
      setState() {
        this.isExpanded = !this.isExpanded; // toggle state
        this.$emit('toggle-state', this.isExpanded); // listens to @toggle-state
      }
    },
    // render() {},
  };
</script>
roszpun commented 6 years ago

Hi, sorry for the late answer. I will be looking at that issue soon.