Vueにてdataの値を子コンポーネントに引き渡せない

お聞きしたいこと

子コンポーネントに対して親コンポーネントからdataを引き渡す際に、下記のような処理を実装しています。

APIサーバーからデータAを取得し、data.firstに代入
上記完了後に、APIサーバーに対して、「URL + data.first」でデータBを取得し、data.secondeに代入

axiosでthenメソッドなども使用していますが、Chromeのコンソールで確認してみると、どうやら代入されていないようです。

<script>
  import cTable from '../common/Table.vue'
  import axios from 'axios'

  export default {
    name      : 'Session',
    components: { cTable },
    data: function() {
      return {
        fields: [
          { key: 'セッション名' },
          { key: 'VLAN ID' },
          { key: 'ロケーション' },
          { key: 'ユーザー名' },
          { key: '接続元ホスト名' },
          { key: 'TCPコネクション数' },
          { key: '転送バイト数' },
          { key: '転送パケット数' },
          { key: '切断' },
        ],
        hubs: [],
        sessions: [],
      }
    },
    methods: {
    },
    beforeMount() {
      axios
        .get("http://localhost/api/hub/session/")
        .then(response => (this.hubs = response.data))

      setTimeout(10)
      console.log("hub " + this.hubs[0])
      axios
        .get("http://localhost/api/hub/session/" + this.hubs[0])
        .then(response => (this.sessions = response.data))
    }
  }
</script>

試しにsetTimeoutなども追加しましたが、特に結果は変わらず・・・

行動規範の内容に同意します

回答1件

ベストアンサー

setTimeout()は指定したミリ秒後に関数を実行する関数です。よくあるsleep()とはまた別物です。

axios.get()は非同期関数なので、逐次処理をしたかったらthen()に入れ子する形で次に実行する処理を書くか、async/awaitを使う必要があります。

js
1    async beforeMount() {
2      this.hubs = await axios
3        .get("http://localhost/api/hub/session/")
4        .then(response => response.data)
5
6      this.sessions = await axios
7        .get("http://localhost/api/hub/session/" + this.hubs[0])
8        .then(response => response.data)
9    }