Как использовать данные ответа Axios в функции данных - vue

Question

Использование axios для извлечения данных API:

fetchData () {
  axios.get(globalConfig.OFFERS_URL)
    .then((resp) => {
      this.offersData = resp.data
      console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
}

Функция данных:

  data () {
    return {
      offersData: {}
    }
  }

Теперь я могу использовать извлеченные данные в своем шаблоне, например: {{ offersData.item[0].id }}

Но можно ли установить выбранные данные в функции данных:

  data () {
    return {
      offersData: {},
      id: this.offersData.item[0].id
    }
  }

Это не работает для меня, возможно ли вообще сохранить ответ axios get в функции данных?

Answer 1

Вы, вероятно, ищете вычисляемое свойство:

data () {
  return {
    offersData: {},
  }
},
computed() {
  id() {
    return this.offersData.item && this.offersData.item[0].id;
  }
}

Что касается функции данных, она используется для определения формы состояния (настройки отслеживаемых свойств) компонента и предоставления ему действительных начальных значений. В этом случае, однако, id не должен быть ни частью состояния (это всегда часть значения offersData, в конце концов), ни его начальное значение не может быть вычислено до того, как offersData будет установлен удаленным вызовом.