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

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

如何根据 asyncData 调用的结果为数据属性(例如"selected_company"(设置初始值？ 我错过了一些重要的东西还是没有简单的方法？

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

Answer 1

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

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

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

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