Open silvbaumann opened 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?
v-collapse-wrapper
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>
Hi, sorry for the late answer. I will be looking at that issue soon.
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:
And inside the component: