CODEWITHSUNDEEP
webpackvue.jsvue-componentvue-router
Luke
Luke

Reputation: 2400

Vue.js ready() method doesn't get called in vue component

I'm using Webpack bundler to serve Vue 2.0 based frontend. The problem is that method ready in components doesn't get called. Do I need to add some extra watch on component or something like that?

My router:

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

import Register from './views/auth/register.vue'

Vue.use(VueRouter);
Vue.use(VueResource);

const routes = [
  { path: '/auth/register', component: Register } 
]

const router = new VueRouter({
  routes // short for routes: routes
})

export default router;

and my sample component:

<template>
    <div>
        <div class="message">{{ msg }}</div>
    </div>
</template>

<script>
export default {

    data: function () {
        return {
            msg: 'Hello from vue-loader!'
        }
    },

    ready: function() {
        console.log('test');
    }
}
</script>

Upvotes: 7

Views: 23619

Answers (2)

Adriano Resende
Adriano Resende

Reputation: 2619

If you need run code after 100% loaded with image and files, test this in mounted():

document.onreadystatechange = () => {
  if (document.readyState == "complete") {
    console.log('Page completed with image and files!')
    // fetch
  }
}

More info: MDN Api onreadystatechange

Upvotes: 5

Belmin Bedak
Belmin Bedak

Reputation: 9201

ready() lifecycle hook method is depracated in VueJS 2.0.x.Use mounted() or created() instead.

Upvotes: 13

Related Questions