@odyzeo/collapse/src/directives/Toggle.js

Odyzeo collapse component with Vue

import { EVENT_RECEIPT, EVENT_TOGGLE } from '../constants/events';

export default {
    bind(el, binding, vnode) {
        const {
            modifiers,
            value,
        } = binding;
        const targets = Object.keys(modifiers);
        if (value) {
            targets.push(value);
        }

        el.addEventListener('click', (e) => {
            e.preventDefault();
            targets.forEach((target) => {
                vnode.context.$root.$emit(EVENT_TOGGLE, target);
            });
        });

        setTimeout(() => {
            vnode.context.$root.$on(EVENT_RECEIPT, (id, show) => {
                if (!targets.includes(id)) return;

                if (show) {
                    el.classList.add('is-toggle-active');
                } else {
                    el.classList.remove('is-toggle-active');
                }
            });
        });
    },
    unbind(el, binding, vnode) {
        vnode.context.$root.$off(EVENT_RECEIPT);
        el.classList.remove('is-toggle-active');
    },
};