bugfix> asynchronous > 投稿

vue-nuxtコンポーネントがあり、コンポーネントのデータ(プロパティ)にasyncData API呼び出しでロードしたデータを最初に設定したい。

data () {
  return {
    selected_company: this.contracts.company1.id *--> this gives me an undefined value*
  }
},
async asyncData({ app }) {
  const contracts = await app.$axios.$get("/companies/contracts")
return {contracts}

私のテンプレートでは、次のコードでデータにアクセスできます(したがって、データは正常にロードされます)。

{{this.contracts.company1}}

「契約」に複数のエントリがあるため、それらを表示し(ドロップダウンなど)、v-modelで選択した会社をキャプチャします。何らかの理由で、「selected_company」属性の初期値を設定する必要があります。 これは簡単な例です(私のデータ構造はより複雑で、たとえばネストされた要素で構成されています)。

asyncData呼び出しの結果に基づいて、たとえば「selected_company」などのデータプロパティの初期値を設定するにはどうすればよいですか。 重要なものを見逃したり、簡単な方法はありませんか?

どんな助けも大歓迎です!前もって感謝します

回答 1 件
  • データプロパティ内で初期値を実行する代わりに、作成されたメソッドに追加することができます。

    created () {
      this.selected_company = this.contracts.company1.id
    }
    
    

    または、まだ機能しない場合は、監視プロパティに追加してみてください。

    watch: {
      contracts: {
        handler (val) {
           this.selected_company = val.company1.id
        },
        deep: true
      }
    }
    
    

あなたの答え