Skip to content
This repository has been archived by the owner on Jul 29, 2024. It is now read-only.

Custom wrapper component breaks functionality #8

Open
silvbaumann opened this issue May 3, 2018 · 1 comment
Open

Custom wrapper component breaks functionality #8

silvbaumann opened this issue May 3, 2018 · 1 comment

Comments

@silvbaumann
Copy link

silvbaumann commented May 3, 2018

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>
@silvbaumann silvbaumann changed the title Custom toggle component breaks functionality Custom wrapper component breaks functionality May 3, 2018
@roszpun
Copy link
Owner

roszpun commented May 15, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants