親コンポーネントで非同期処理で取得した値を子コンポーネントへ

実装内容
親コンポーネントのcreatedで非同期処理にて情報を取得し、
取得した情報の中のキーを子コンポーネントのpropsに渡し、
子コンポーネントではcreatedでpropsで渡されたキーより非同期処理を呼び出し、
子コンポーネントに表示しています。

▼親コンポーネント

<template>
  <div>
    <span>{{ header }}</span>
    <child-sample :postNo="postNo"></child-sample>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import ChildSample from "./ChildSample.vue";

export default Vue.extend({
  name: "ParentSample",
  components: {
      ChildSample
  },
  data(){
    return {
      postNo: "",
      header: ""
    }
  },
  created: function(){
    this.header = "hogehoge";
    // 非同期処理で、postNoを取得
    setTimeout(()=> {
      this.postNo = "9900000";
    }, 3000);
  },
});
</script>

▼子コンポーネント

<template>
  <div>
    <label>都道府県:</label>
    <span>{{ prefecture }}</span> 
    <br>
    <label>市:</label>
    <span>{{ city }}</span> 
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Axios from 'axios'

export default Vue.extend({
  name: "ChildSample",
  props: {
    postNo: {type: String, required: true}
  },
  data(){
    return {
      prefecture : "",
      city: ""
    }
  },
  created: function() {
    // 非同期処理で住所を取得
    Axios.get("https://postcode.teraren.com/postcodes.json?s="+ this.postNo).then(response => {
      const json = JSON.parse(JSON.stringify(response));
      this.prefecture = json.data[0].prefecture;
      this.city = json.data[0].city;
    })
  }
})
</script>

課題

子コンポーネントのcreatedのタイミングでは、
親コンポーネントの非同期処理によるキー取得は完了していないので、
子コンポーネントでは、キーが初期値で画面表示されており、
親コンポーネントで取得したキーで画面表示できない。

親コンポーネントの非同期処理で取得したキーで、
子コンポーネントのcreatedの非同期処理を実行し、画面表示したい。

どのようにすれば、できますでしょうか?

補足

親コンポーネントのテンプレート部で、下記のようにv-ifでキーが準備できているかチェックすることで、
子コンポーネントのcreatedを遅らせることが可能なことはわかっています。
しかし、子コンポーネントのラベルは表示している状態で初期表示したいです。

<child-sample v-if="postNo != ''" :postNo="postNo"></child-sample>

改善策について、ご意見頂きたいです。
よろしくお願いします。

child-sample で postNo を watch に入れてみては?

8cf022さん、回答ありがとうございます。

watchに入れることで、対応できそうですね。

他にも対策があれば、ご教授ください!

image
let THAT = this;
setTimeout(()=> {
THAT.postNo = “9900000”;
}, 3000);

@zuogexiannvba When using Arrow Functions, there will be no problem of this pointing.

example:

<template>
  <div v-if="postNo">
    <template v-if="loading">
      読み込み中...
    </template>
    <template v-else>
      <label>都道府県:</label>
      <span>{{ prefecture }}</span>
      <br />
      <label>市:</label>
      <span>{{ city }}</span>
    </template>
  </div>
  <!-- <div v-else>
      postNoは有効値ではありません
  </div> -->
</template>

<script lang="ts">
import Vue from 'vue'
import Axios from 'axios'

export default Vue.extend({
  name: 'ChildSample',
  props: {
    postNo: { type: String, required: true },
  },
  data() {
    return {
      prefecture: '',
      city: '',
      loading: true,
    };
  },
  watch: {
    postNo: {
      handler() {
        if (!this.postNo) return;
        this.loading = true;
        Axios.get(`https://postcode.teraren.com/postcodes.json?s=${this.postNo}`)
          .then((response) => {
            this.prefecture = response.data[0].prefecture;
            this.city = response.data[0].city;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      immediate: true,
    },
  },
});
</script>

When the postno is modified externally, childsample will re request the API to get the latest data.

Thanks for your advice ,I get it now.