Home

I have no idea what is going on, but i managed to get it to a minimum of code (short of creating a brand new nuxt app) and it still reproduces, here’s the specimen:

<template>
    <b-container fluid>
        <h1 class="text-center">Map</h1>
        <template v-if="map">
            HAS MAP
        </template>
    </b-container>
</template>

<script>
    export default {
        head: () => ({
            title: "Map"
        }),
        data: () => ({
            map: null
        }),
        mounted() {
            this.map = 2;
        }
    };
</script>

As you may see, I have a map attribute, and I intend on setting it on “mounted”.

But if I load the page fresh map is equal to null by the time the page renders.

If I navigate from a nuxt-link (or alter the code and it hot reloads) things work just fine.

I found that changing it to this works as intended:

this.$nextTick(() => { this.map = 2; })

Any ideas on why?