инициировать данные с асинхронными данными в vue nuxt

Question

У меня есть компонент vue-nuxt и я хочу изначально установить data- (свойство) моего компонента с данными, которые я загрузил с помощью вызова API asyncData.

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.Это упрощенный пример (моя структура данных более сложна и состоит, например, из вложенных элементов).

Как установить начальное значение для свойств данных, например, selected_company, на основе результата asyncData-вызов?Я скучаю по чему-то важному или нет легкого пути для этого?

Любая помощь высоко ценится!заранее спасибо

Answer 1

Вместо того, чтобы делать начальное значение внутри свойства данных, вы можете попытаться добавить его в созданный метод.

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

Или, если оно все еще не работает, попробуйте добавить его в свои часысобственность.

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