[Vuejs]-Is there a way in Vue 2 to have a component that just applies a class to the sub components and then disappears?

by

0👍

Can you try following for stack.vue:

<template>
    <slot />
</template>
<script>
export default {
    methods: {
        updateDOMCls() {
            document.querySelectorAll('.Stack__firstEl').forEach(function(el) {
                el.classList.add('mt-32');
            })
            document.querySelectorAll('.Stack__otherEl').forEach(function(el) {
                el.classList.add('mt-12');
            })

        }
    },
    mounted() {
        this.updateDOMCls();
    }
}
</script>

And leverage slot to provide dynamic components. PLEASE ENSURE TO GIVE CLASSES Stack_firstEl and Stack_otherEl:

    <stack>
      <div class="Stack__firstEl"></div>
      <div class="Stack__otherEl"></div>
      <div class="Stack__otherEl"></div>
      <div class="Stack__otherEl"></div>
    </stack>

Leave a comment