Vue.JS：ページ読み込み後に関数を呼び出す方法は？

Question

私は次のVueコンポーネントを持っています。呼び出し機能として Loginを呼び出します。 checkAuth - ページ更新の間に認証ステータスをチェックしています。

しかし、私はcheckAuthボタンを押すことなくどのように呼び出すことができますか？

var GuestMenu = Vue.extend({ 
    props : ['username','password'], 
     template: ` 
     <div id="auth"> 
      <form class="form-inline pull-right"> 
       <div class="form-group"> 
        <label class="sr-only" for="UserName">User name</label> 
        <input type="username" v-model="username" class="form-control" id="UserName" placeholder="username"> 
       </div> 
       <div class="form-group"> 
        <label class="sr-only" for="Password">Password</label> 
        <input type="password" v-model="password" class="form-control" id="Password" placeholder="Password"> 
       </div> 
       <button type="submit" class="btn btn-default" v-on:click.prevent="sendLoginInfo()">LOGIN</button> 
       <button type="submit" class="btn btn-default" v-on:click.prevent="checkAuth()">CheckAuth</button> 
      </form> 
     </div>`, 

     methods: { //hash key-value 
      sendLoginInfo : sendLoginInfo, // key (anyname) | value -> calling function name (from separate file) 
      //calling without brackets because we do need return from function, we need just function 

      checkAuth : checkAuth // restore authorization after refresh page if user already have session! 
     } 

      }); 

私はそれがアプリからだ呼び出そうとしました：

App = new Vue ({ // App -- is need for overwrite global var. Global var need declarated abobe all function, because some it's function is calling from outside 
    el: '#app', 
    data: 
    { 
     topMenuView: "guestmenu", 
     contentView: "guestcontent", 
     username: "", 
     password: "", 

    } 
    , 
    ready: function() 
    { 
    checkAuth(); // Here 

    } 

    } 

) 

しかし、すべてのコンポーネントがロードされたときに、それが呼び出しているように見えます、

function checkAuth() 
{ 
    // we should NOT send any data like: loginData because after refreshing page 
    // all filds are empty and we need to ask server if he have authorize session 

    console.log("Checking if user already have active session"); 

    this.$http.post('http://127.0.0.1:8080/checkAuthorization').then(function (response) { 
     console.log("server response: ", response.data) 
.... 

ここで私はエラーになっています：

を

authorization.js:69 Uncaught TypeError: Cannot read property 'post' of undefined

私が実行しようとしました：

methods: { //hash key-value 
     sendLoginInfo : sendLoginInfo, // key (anyname) | value -> calling function name (from separate file) 
     //calling without brackets because we do need return from function, we need just function 

    }, 
    ready() 
    { 
     checkAuth() 
    } 

しかし、再びエラーました： Uncaught TypeError: Cannot read property 'post' of undefined

私が間違っているのは何を？

Answer 1

メインインスタンスの外部から関数をインポートし、それをメソッドブロックに追加しないでください。したがって、thisのコンテキストはではなく、のVMです。

このいずれかの操作を行います。

ready() { 
    checkAuth.call(this) 
} 

または（Vueのは、あなたのために正しくthisをバインド行います）最初にあなたの方法にメソッドを追加し、このメソッドを呼び出します。

methods: { 
    checkAuth: checkAuth 
}, 
ready() { 
    this.checkAuth() 
} 

Answer 2

は（マウント見てみましょうを）私はそれが助けだと思う​​。

https://vuejs.org/v2/api/#mounted