Vue.JS: ページが読み込まれた後に関数を呼び出すにはどうすればいいですか? 質問する

Vue.JS: ページが読み込まれた後に関数を呼び出すにはどうすればいいですか? 質問する

次の 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

何が間違っているのでしょうか?

ベストアンサー1

見てみましょうmounted()私はそれが助けになると思います

https://v2.vuejs.org/v2/api/#マウント済み

おすすめ記事