在 vue nuxt 中使用异步数据启动数据

Question

我有一个 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}}

因为我在 "contracts" 中有多个条目，所以我想显示它们（例如在下拉列表中）并使用 v-model 捕获选定的公司。由于某些原因，我需要为我的 "selected_company" 属性设置一个初始值。这是一个简化的示例（我的数据结构更复杂，例如由嵌套元素组成）。

如何根据 asyncData 调用的结果为数据属性设置初始值，例如 "selected_company"？我是否错过了一些重要的事情或者没有简单的方法？

非常感谢任何帮助！提前谢谢你

Answer 1

与其在数据内部做初始值属性，不如尝试在创建的方法中添加。

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

或者如果还是不行，请尝试将其添加到您的手表属性。

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

在 vue nuxt 中使用异步数据启动数据

initiate data with async data in vue nuxt

asynchronous

vue.js

vue-component

nuxt.js