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

【问题标题】：initiate data with async data in vue nuxt在 vue nuxt 中使用异步数据启动数据
【发布时间】：2018-11-16 19:15:31
【问题描述】：

我有一个 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”？我是否错过了一些重要的事情，或者没有简单的方法？

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

【问题讨论】：

标签： asynchronous vue.js vue-component nuxt.js

【解决方案1】：

不用在 data 属性中做初始值，你可以尝试在 created 方法中添加它。

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

或者如果它仍然不起作用，请尝试将其添加到您的手表属性中。

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

【讨论】：