Nuxt.js: Weird behavior on "mounted" when altering data on a page

[udany]

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?

_{This question is available on Nuxt.js community (#c2483)}

[KonstantinVlasov]

Hi! mounted hook executed only on the client side

[udany]

That would make sense, but I'm running in spa mode

[sharh]

data() will excute twice on a components, when use this.$router.push('to/path').
I think this may only in v1.4.0 caused by

[fuxianwei]

There is a real problem with multilayer nested router, and there is no response to the update state in the mounted hook.

[uptownhr]

@Atinux @pi0 I believe this is a new bug introduced in the latest version. I have also ran into this as well on a very basic setup in SPA mode. But the other way around. Where if I perform a full refresh, it works fine but not even I enter the route using a nuxt-link.

One thing to note is that this only occurs during a nuxt-link within a nuxt-child.

The example below will show that test stays as false

Steps to reproduce

1. create vue page files
2. index.vue
3. settings.vue
4. settings/profile.vue
5. create a nuxt-link into settings.vue
6. in settings.vue, create nuxt-link to settings/profile.vue
7. Go to index.vue and refresh page
8. Follow link to settings.vue
9. Follow link to profile.vue, notice that test does not resolve to true
10. I want to add that if you go straight into settings/profile from index, you will not see this issue.

settings.vue

<template>
<div>{{test}}</div>
</template>

<script>
export default {
  data () {
    return {
      test: false
    }
  }.
  mounted () {
    this.test = true
  }
}
</script>

[uptownhr]

I know 2.0 is being worked on right now but given the severity of the bug, I recommend a quick patch.

[Atinux]

Hi @uptownhr

Could you confirm the bug is fixed with nuxt-edge? I tried with nuxt-edge and could not reproduce it.

[uptownhr]

Getting error after trying nuxt-edge on my project. I'm going to have to reproduce separately. I'll try and get this done over the weekend.

Module build failed: TypeError: Cannot read property 'sassLoader' of undefined
    at getLoaderConfig (/home/uptown/Projects/Products/Bambee/dev/admin/node_modules/sass-loader/index.js:389:40)
    at Object.module.exports (/home/uptown/Projects/Products/Bambee/dev/admin/node_modules/sass-loader/index.js:42:23)

 @ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-1-2!./node_modules/sass-loader??ref--10-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./components/policy/modal/preview.vue?vue&type=style&index=0&id=67a21384&lang=scss&rel=stylesheet%2Fscss&scoped=true 4:14-439 14:3-18:5 14:439-18:4 15:22-447
 @ ./components/policy/modal/preview.vue?vue&type=style&index=0&id=67a21384&lang=scss&rel=stylesheet%2Fscss&scoped=true
 @ ./components/policy/modal/preview.vue
 @ ./node_modules/babel-loader/lib??ref--6-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/policies/index2.vue?vue&type=script&lang=js
 @ ./pages/policies/index2.vue?vue&type=script&lang=js
 @ ./pages/policies/index2.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

[uptownhr]

@Atinux https://github.com/uptownhr/nuxt-issue-2854
I created a new repo off of the nuxt starter template.

Let me now see if I can reproduce when using edge.

[uptownhr]

@Atinux reproduced on edge as well. I pushed an edge branch into that repo that shows the reproduction.

I do beleive the issue is caused by settings/index.vue not being there. After I added a blank index.vue into the settings folder, the issue no longer occurs. Feels like some kind of error is being swallowed. So not as big of a bug but still something that should be addressed with atleast a warning.

[uptownhr]

https://github.com/uptownhr/nuxt-issue-2854/tree/edge edge branch

[uptownhr]

on a side note, first time checking out edge, is this nuxt 2 on webpack 4? Love the parallel server/client build and modules status. Have not looked much further but I did run into one issue.

I'm used to defining the script tags with type="text/ecmascript-6" to help my IDE figure out .vue file and that it supports es6. However, it seems the webpack config or vue-loader is now more specific and excluding the script tag. I had to remove the type declaration for it to load. Know anything about this?

[Atinux]

Indeed, you cannot set the "type" in script or style otherwise it will break since vue-loader won't try to load it (or badly, still have to investigate), cc @pi0

I just tried your repro, this is weird, I will have to look at it a bit more, actually, you can fix it by using asyncData instead of data.

[uptownhr]

@Atinux just fyi: type functions in 1.4.0

Also, using asyncData is a workaround, the use of data should in this case work the same. I normally use data all the time until i have an async need.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.