web-dev-qa-db-ja.com

Vue.js ready（）メソッドがvueコンポーネントで呼び出されない

Webpackバンドラーを使用してVue 2.0ベースのフロントエンドを提供しています。問題は、コンポーネントのメソッドreadyが呼び出されないことです。追加のウォッチを追加する必要がありますか？コンポーネントまたはそのようなもの？

私のルーター：

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;

と私のサンプルコンポーネント：

<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>
webpackvue.jsvue-componentvue-router
6
Luke

ready()ライフサイクルフックメソッドはVueJS2.0.xで廃止されました。代わりにmounted()またはcreated()を使用してください。

11
Belmin Bedak

imageおよびfilesを100％ロードした後にコードを実行する必要がある場合、 mounted()でこれをテストします。

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

詳細： MDN Api onreadystatechange

2
Adriano Resende