Vuejs配列プッシュ

Question

バックエンドからのオブジェクトの配列を以下の形式で受け取っています。このデータを取得してJavaScript配列にプッシュしようとしているので、後で必要に応じて使用できます。

<script> 
    export default { 
     data(){ 
     return { 
      fakeUsers: [], 
      fakeUser: {id: '', name: '', email: ''}, 
     } 
     }, 
     methods:{ 

     }, 
     mounted() { 
      var route = '/get-users'; 
      this.$http.get(route).then((response)=>{ 
       for (var i = 0; i < response.data.length; i++) { 
       this.fakeUser.id = response.data[i].id; 
       this.fakeUser.name = response.data[i].name; 
       this.fakeUser.email = response.data[i].email; 
       this.fakeUsers.push(this.fakeUser); 
       } 

      }); 
      console.log(this.fakeUsers); 
      console.log(this.fakeUsers[0]); 
     } 
    } 
</script> 

VUE-devのツールの結果：console.log(this.fakeUsers);が[__ob__: Observer]あるラインの

出力

[ 
    { 
    id: 1, 
    name: "Dr. Darrin Frami III", 
    email: "darrin67@example.com", 
    address: "42568 Cameron Cove Fritschborough, MA 86432-0749", 

    }, 
] 

は、ここに私のvuejsコードです。 [Array[10]]のようなものを印刷してはいけませんか？

console.log(this.fakeUsers[0]);という行の出力はundefinedであり、私はその理由を理解できません。

Answer 1

$ http（）は、非同期のajax呼び出しを作成するため、then()のコードはの後にの後に実行されます。

簡単な解決策：コンソールコマンドを.then()の関数に入れてください。