В каком хуке вызывать Axios для обновления DOM?

Question

[Артем Михневич]

Вытягиваю данные через Axios:

mounted() {
   axios
      .get(`http://api.openweathermap.org/data/2.5/find?lat=${this.lat}&lon=${this.lon}&type=like&lang=ru&units=${this.measureSystem}&APPID=${this.ApiKey}`)
      .then(response => (this.dataWeather = response));
  },

И отслеживаю изменения кнопок тут:

computed: {
   setMeasure () {
    if (this.toggle === 1) {
     return this.measureSystem = 'metric'
    } else {
      return this.measureSystem = 'Imperial'
    }
   }
}

Переменная сменяется, а страницу не рендерит. Пробовал вызывать повторно запрос в updated и beforeUprade, страница рендерилась c задержкой и вызывалось кучу запросов, словно рекурсию словил.
Подскажите пожалуйста, в каком хуке жизненного цикла вызвать Axios запрос , или как правильнее будет сделать?

Answer 1

[0xD34F]

Никакие хуки тут не нужны. Настройте слежение за свойством:

watch: {
  measureSystem: {
    immediate: true,
    handler() {
      // сюда переносите код из mounted - axios.get(...)
    },
  },
},

Заниматься установкой значений в computed не надо, сделайте measureSystem из обычного свойства вычисляемым (если, конечно, оно используется где-то ещё, помимо показанного запроса; в противном случае можно следить за toggle и вычислять значение параметра units непосредственно перед самим запросом):

computed: {
  measureSystem() {
    return this.toggle === 1 ? 'metric' : 'Imperial';
  },
},

Comments

[Артем Михневич]

Спасибо )