vue nuxtの非同期データでデータを開始する

bugfix> asynchronous > 投稿 2020-08-23 19:11

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」などのデータプロパティの初期値を設定するにはどうすればよいですか。重要なものを見逃したり、簡単な方法はありませんか？

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

データプロパティ内で初期値を実行する代わりに、作成されたメソッドに追加することができます。
```
created () {
  this.selected_company = this.contracts.company1.id
}
```
または、まだ機能しない場合は、監視プロパティに追加してみてください。
```
watch: {
  contracts: {
    handler (val) {
       this.selected_company = val.company1.id
    },
    deep: true
  }
}
```

bugfix

vue nuxtの非同期データでデータを開始する

asynchronous

vue.js

vue-component

関連記事