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:

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