vue の this.xxx が空になってしまいます

Question

vue の this.xxx が空になってしまいます。

下記のコードの「console.log(this.markers)」を確認すると結果が「Array(0)」になってしまいます。
しかし chrome の拡張機能で markers の結果を見ると axios のレスポンスの通りに Array(3)となっております。（※画像）
console.log で「Array(3)」と言う結果を取得するにはどのようにしたらよいでしょうか。
どなたかご教授頂けましたら幸いです。
よろしくお願いいたします。

export default {
    data() {
        return {
            map: null,
            markers: [],
        }
    },
    mounted (){
        this.drawMap();
    },
    methods: {
        fetchDatas: async function (){
            //初期データ取得する。
            axios.get(
                '/map/api/points/'
            ).then(
                response => (this.markers = response.data)
            ).catch(function (error) {
                alert("データの取得に失敗しました。")
            })
            alert(this.markers)
        },
        drawMap: async function () {
            await this.fetchDatas()
             //マップを描画する。
            console.log(this.markers)
            let timer = setInterval(() => {
                if(window.google){
                    clearInterval(timer);
                    this.map = new window.google.maps.Map(document.getElementById("map"), {
                        center: {lat: this.markers[0]["lat"], lng: this.markers[0]["lng"]},
                        zoom: 15
                    });       
                }
            },500)
        }
    }
}

Answer 1

fetchDatasが即座に完了状態になる非同期関数になっているためです。
fetchDatasは内部でaxios.getを呼び出していますがその結果を待たずに完了状態になるため、fetchDatasが完了してもthis.markers = response.dataがまた実行されていないことがありえます。
chrome の拡張機能で markers の結果を見る場合、結果を見ようとして画面を操作している間にthis.markers = response.dataが実行されるので「Array(3)」と言う結果を取得できるのでしょう。

axios.get(～をawait axios.get(～にするとよいでしょう。

Comments

[退会済みユーザー]

ありがとうございます！無事に取得することが出来ました。
おかげさまで開発がすすめられそうです。