Vue.js（Nuxt.js)computed内でaxiosを使ってデータを取得したい

Question

前提・実現したいこと

親コンポーネントにある画像のクリックに応じて、子コンポーネントにidを送り、子コンポーネントでは対応するデータをaxiosで読み出す、ということをしたいのですが、オプションがmountedの場合は、非同期処理async~awaitを付けてうまく動きましたが、computedですと非同期に対応していないとエラーになります。あきらめて、今度は以下のように、Promiseオブジェクトで処理しようとしたのですが、今度は、書式があっていないのかエラーがでます。

やり方など、お教えていただけませんでしょうか。
よろしくお願いいたします。

<template>
  <div>
    {{ eventData }}
  </div>
</template>

<script>
export default {
  computed: {
    eventData: function() {
      return this.$axios.$get(`/events/${this.id}`)
    }
  },
  props: {
    id: {
      type: Number
    }
  }
}
</script>

以下の書き方はできない、とエラーになります。

  computed: {
    eventData: async function() {
      return await this.$axios.$get(`/events/${this.id}`)
    }
  },

Comments

[karamarimo]

「以下の書き方はできない、とエラーになります。」とはどのようなエラーですか？実行環境がasync/awaitに対応していない可能性があります。

[orori]

ありがとうございます。
すみません、下にエラーをコピペします。mountedオプションのときはasync/awaitはうまくいきます。調べていたのですが、ライブラリ’vue-async-computed’　https://www.npmjs.com/package/vue-async-computed　のようなものがなければ実現できないものなのかもしれないと思いました。

10:21 error Unexpected async function declaration in "eventData" computed property vue/no-async-in-computed-properties
11:14 error Unexpected await operator in "eventData" computed property vue/no-async-in-computed-properties

[karamarimo]

それはeslintのエラーですね。javascriptの文法的には間違っていないです。
https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-async-in-computed-properties.md
しかしそのままでは意図した動作にならないのでベストアンサーで述べられていることをする必要があります。

[orori]

ありがとうございます。eslintは記述を整形するものと理解していますが、、どこをみるとeslintのエラーとわかるのでしょうか？再表示してみましたが、、わかりませんでした。よろしくお願いいたします。

[karamarimo]

vue/no-async-in-computed-properties というのがeslintのルール名なのでそれから判断しました。

[orori]

ご返事遅くなり申し訳ありません、そういうことなのですね。eslintについて学ばなればと思いました。ありがとうございました。

Answer 1

過去に同じような質問ありましたのでそちらを参照ください。

• Vue.js - Vue.jsのcomputedでのaxios通信｜teratail

Comments

[orori]

申し訳ありません、過去の質問をしっかり検索していなかったです。ありがとうございました。
watchを使ってみます。

Answer 2

皆さんからいただいた回答を下に、以下のようにwatchを使って目的を達することができました。
ありがとうございました！

watch: {
    id : async function() {
      const updateEventData = await this.$axios.$get(`/events/${this.id}`)
      this.eventData = updateEventData
    }
  },