CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-router
Liad Goren
Liad Goren

Reputation: 319

Vue.js Component refs and transitions not woking together

Template:

<transition name="slide-fade" mode="out-in">
            <router-view ref="route" @resetSteps="handleResetSteps" @nextStep="handleNextStep"></router-view>
</transition>

Code

computed: {
            buttonOptions() {
                if (!this.isMounted || !this.$refs.route) {
                    return {};
                }
                return {
                    disabled: this.$refs.route.buttonOptions.disabled || this.$refs.route.buttonOptions.loading,
                    loading: this.$refs.route.buttonOptions.loading,
                    text: this.$refs.route.buttonOptions.text,
                    hidden: this.$refs.route.buttonOptions.hidden,
                };
            }
        },

methods:{
async handleActiveStep(activeStep) {
                this.isMounted = false;
                await this.$router.push({name: activeStep});
                this.isMounted = true;
            },
}

For some reason, when I apply transitions to the above template, the computed property's access to the reference component is not working.

What I mean is, I get 'undefined' on the current ref, although I make sure to wait until the 'push' is handled with the router (which I why I use the 'isMounted' property)

If I remove the transition tag, everything works as expected

any ideas why..?

Upvotes: 1

Views: 1343

Answers (1)

Dvdgld
Dvdgld

Reputation: 2164

$refs are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties. Vue.js documentation

Upvotes: 2

Related Questions