1
export default {    
    mounted() {
      setTimeout(function() {
        this.$emit('onLoad')
      }, 4000);
    }
} //views/Load.vue

I want to move to another page when 4seconds after page access. 

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view
        @onLoad="changeRoute('login')">
      </router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    changeRoute (routeName) {
      this.$router.push({ name: routeName })
    }
  }
}
</script> //App.vue

I want to send a signal to 'App.vue' by '$emit' and then go to the page that is connected by router.

All routers are connected properly.

but the error of "Uncaught TypeError: this.$emit is not a function" apperas.

How can I do?

Sh031224
  • 769
  • 1
  • 7
  • 20
  • Use an arrow function for your `setTimeout` callback to preserve the surrounding `this` value. – skirtle Jan 04 '20 at 10:26
  • Thank you!! The error has been resolved. – Sh031224 Jan 04 '20 at 10:34
  • Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – AT82 Jan 07 '20 at 19:51

1 Answers1

1

It looks like the issue could be the function inside the setTimeout not being binded to the context , so you can try using an arrow function or bind the function the the outer context:

export default {    
    mounted() {
      setTimeout(() => {
        this.$emit('onLoad')
      }, 4000);
    }
}
karliatto
  • 147
  • 1
  • 1
  • 10