使用vue nuxt

Question

我有一个vue-nuxt组件，并且想要使用asyncData API调用加载的数据初始设置组件的data-（property）。

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}}

因为我在＆＃34;合同中有多个条目＆＃34;我想显示它们（例如在下拉列表中）并使用v-model捕获选定的公司。出于某些原因，我需要为我的＆＃34; selected_company＆＃34; -attribute设置初始值。 这是一个简化的示例（我的数据结构更复杂，例如嵌套元素）。

如何设置数据属性的初始值，例如＆＃34; selected_company＆＃34;根据asyncData调用的结果？ 我是否会错过一些重要的内容或者没有简单的方法呢？

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

Answer 1

您可以尝试在创建的方法中添加初始值，而不是在data属性中执行初始值。

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

或者如果它仍然无效，请尝试将其添加到您的监视属性中。

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