trigger reflow manually

[joernroeder]

sometimes i'm having nested components inside a "Smooth Component" and one of them is toggling a value in it's internal state and the component inside the <slot /> never gets updated directly (which is actually fine). Is there a function (maybe a function returned from $smoothReflow()) which i can invoke manually to check and trigger a reflow?
thx

[guanzo]

That could work. There needs to be at least 2 functions, 1 to save the element's attribute values before a data update, and 1 to trigger the reflow after a data update.

Problem is the Smooth Component still needs to know when to call these functions, and only the child component knows when it's updated (thru the beforeUpdate and updated hooks). The child would need to hook into those events and emit the events to the parent. I'm looking for a way to do this automatically, and not force the user (you) to manually emit beforeUpdate and updated events to the Smooth Component.

According to this SO answer, you can dynamically add a lifecycle listener. Based on that, something like this should work (untested).

// SmoothReflow.vue
<template>
    <component :is="tag">
        <slot/>
    </component>
</template>

<script>
import smoothReflow from 'vue-smooth-reflow'
export default {
    name: 'SmoothReflow',
    mixins: [smoothReflow],
    props: {
        tag: {
            type: String,
            default: 'div'
        },
        selfUpdate: {
            type: Boolean,
            default: false
        },
        options: Object,
    },
    mounted () {
        const reflow = this.$smoothReflow(this.options)
        if (this.selfUpdate) {
            // Add lifecycle hooks to children
            this.$slots.default.forEach(vNode => {
                this.addUpdateHookListeners(vNode.componentInstance, reflow)
            });
        }
    },
    methods: {
        addUpdateHookListeners (component, reflow) {
            const { $options } = component
            if (!$options.beforeUpdate) {
                $options.beforeUpdate = [];
            }
            $options.beforeUpdate.push(() => reflow.save())
            if (!$options.updated) {
                $options.updated = [];
            }
            $options.updated.push(() => reflow.trigger())
        }
    }
}
</script>

// Component using the Smooth Component

<template>
    <SmoothReflow selfUpdate>
        <div v-for="n in children"/>
    </SmoothReflow>
</template>

I'll look into this, and if it works, I'll most likely export a SmoothReflow component from the vue-smooth-reflow module.