vuejs mounted lifecycle not triggering

Question

in my App component below, mounted() lifecycle hook is not triggered:

<template>
  <div>
    <div v-if='signedIn'>
        <router-view />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Oidc from 'oidc-client'

Vue.use(Oidc)

export default {
  data () {
    return {
      user: null,
      signedIn: false,
      mgr: new Oidc.UserManager({...settings...})
    }
  },
  methods: {
    signIn () {
    },
    signOut () {
    },
    getUser () {
    },
    mounted () {
      this.getUser()
    }
  }
}
</script>

I have gone through the code several times, not sure what I'm missing. I have this in the main.js file:

new Vue({
  el: '#app',
  render: h => h(App),
  router
})

JP. Aulet JP. Aulet · Accepted Answer · 2017-11-15T11:10:26

You have the mounted inside the method area and this means that is a 'function' called mounted (like getUser()), not the mounted that automatically called when the component mounts.

You should change it like:

methods: {
    signIn () {
    },
    signOut () {
    },
    getUser () {
    }   
  },
mounted () {
      this.getUser()
}

And then it should work and be called automatically by Vue as a normal lifecycle method.

Hope it helps!

vuejs mounted lifecycle not triggering

1 Answers