axiosでGetしたresponseを配列で返す

Question

前提・実現したいこと

VueでaxiosでGetした値をvue-tables-2を利用して、ソートやPaginationが利用できるTableを表示したいと思っています。

単なる配列を返すとうまく表示されるのですが、axiosでGetしたものをreturnしても配列がうまくreturn出来ません。

該当のソースコード

import Vue from 'vue'
import VueTables from 'vue-tables-2';
import axios from 'axios'
Vue.use(VueTables.ClientTable);

new Vue({
    el: "#app",
    data: {
        columns: [
            'id',
            'email'
        ],
        data: getData(),
        options: {
            headings: {
                id: 'id',
                email: 'メールアドレス'
            },
            sortable: [
                'id', 'email'
            ],
            texts: {
                filterPlaceholder: '検索する'
            }
        }
    }
});

これはうまく表示されます。
function getData() {
    return [{
        'id': 1,
        'email': '[e-mail]'
    },
    {
        'id': 2,
        'email': '[e-mail]'
    },

    {
        'id': 3,
        'email': '[e-mail]'
    },
    {
        'id': 4,
        'email': '[e-mail]'
    }
    ];
}

function getData() {
    var users = [];
    axios.get("/api/users")
        .then(response => {
            this.users = response.data
            console.log(users)
        }).catch(response => {
            alert('サーバーエラーが発生しました。')
        });
    console.dir(users);
    return this.users;
}

index.js:58 Uncaught TypeError: Cannot read property 'users' of undefined

となってしまい、うまく、Arrayが返せません。どのようにすれば良いのでしょうか。

宜しくお願いいたします。

Answer 1

うまく、Arrayが返せません。どのようにすれば良いのでしょうか。

残念ながら、通信は非同期で行われますので、返り値としてそのまま返す方法はありません。

こちらのように、mountedなど何かしらのイベントでaxiosを呼んで、コールバックで結果をセットする、という流れになります。

Comments

[Yuinyan]

有難うございます。単純にaxiosを読んで、結果をセットすることが出来そうですね。しかし、vue-tables-2を同時に使う場合、どこに入れ込めば良いのでしょうか。以下のようにoptionsなどを入れることを想定しております。
https://qiita.com/kimullaa/items/4182644b4eed505413ad

[maisumakun]

<v-server-table>にrequestFunctionを組み合わせる、というような方法がありそうです（未検証）。

https://github.com/matfish2/vue-tables-2#custom-request-function

[Yuinyan]

大変有難うございます。試してみます。