javascript - Vuejs 配列プッシュ

Question

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

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

    },
]

ここに私のvuejsコードがあります:

<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]. のようなものを印刷するべきではありません[Array[10]]か？

行の出力は で、console.log(this.fakeUsers[0]);理由undefinedがわかりません。

Answer 1

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

簡単な解決策: コンソール コマンド.then()も同様に関数に入れます。