vue.jsの実行タイミングについて

前提・実現したいこと

特定の要素をクリックするとaxiosでjsonを取得してその値を子コンポーネントに渡したいのですが、うまくいかないのでご教授頂きたくお願いいたします。
取得したjsonは親の変数に保存してpropsで子コンポーネントに渡すという処理です。
また、axiosによるjsonの取得は複数のmethodsで使用するため、個別にメソッドとして作成してクリックイベントで読み込む処理にしています。

例としてconsole.log()で出力しているだけですが、1回目のクリックでは子コンポーネントのtoChildに渡されず2回目のクリックで"toChild"propsに値が代入されていることが確認できています。

該当のソースコード（一部を抜粋）

親

php
1<html>
2...
3<button @"onClick(id)"></button>
4...
5<modal :to-child="child"></modal>
6<script>
7  data: {
8    items: "",
9    child: "",
10  },
11  methods: {
12    onClick: function(id) {
13      thi.getitems(id);
14      this.child = this.items;
15    },
16
17    getItems: function (id) {
18      axios.get("./url", {
19       params: {id: id},
20     }).then(
21       function (res) {
22         this.items= res.data;
23       }.bind(this)
24     ).catch(function (e) {
25       console.error(e);
26     });        
27  };
28</script>
29</html>

子

vue
1<template>
2 ...
3</template>
4export default {
5  props: ["toChild"],
6  mounted: function () {
7    console.log("to-child : mouted ↓ ");
8    console.log(this.toChild);
9  },
10  updated: function () {
11    console.log("to-child updated ↓ ");
12    console.log(this.toChild);
13  },
14};

以上よろしくお願いいたします。

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

回答1件

ベストアンサー

上手くいかない理由
axios が非同期のためthis.items = res.data; が実行されるよりも前に
this.child = this.items; が実行されてしまう。

解決策
getItems が Promise を返すようにして、呼び出す側では then の中に処理を書く。
そうすると、this.items = res.data; の後に then の中のthis.child = this.items;が実行されるはずです。

methods: {
 onClick: function(id) {
   this.getItems(id).then(() => {
     this.child = this.items;
   })
 },
 getItems: function (id) {
    return axios.get("./url", {
      ...

投稿2021/03/11 07:46