Ajax通信が終わるまでcomputedの実行を遅らせたい

Question

こんばんは。いつもお世話になっております。

以下のコードはエラーになります。

<template>
  <div id="app">
    {{ length }}
  </div>
</template>

<script>
export default {
  data: () => ({
    foo: null
  }),
  created: async function () {
    await sleep(0)
    this.foo = 'bar'
  },
  computed: {
    length() {
      return this.foo.length
    }
  }
}

async function sleep(msec) {
  return new Promise(resolve => {
    window.setTimeout(resolve, msec)
  })
}
</script>

原因はfooに値が代入されるタイミングが1テンポ遅いからですが、これをなんとかしてエラーを発生させないようにしたいです。親側でAjaxによる通信を終えてからpropsで渡すという方法もありますが、できればそれはしたくないです。

回答よろしくお願いします。

Answer 1

<template>
  <div id="app" v-if='initialized'>
    {{ length }}
  </div>
</template>

<script>
export default {
  data: () => ({
    foo: null,
    initialized: false,
  }),
  created: async function () {
    await sleep(0)
    this.foo = 'bar'
    this.initialized = true
  },
  computed: {
    length() {
      return this.foo.length
    }
  }
}

async function sleep(msec) {
  return new Promise(resolve => {
    window.setTimeout(resolve, msec)
  })
}
</script>

こんな感じで初期化フラグを足したらどうでしょうか

Comments

[toshiyan]

回答ありがとうございます！参考になりました！