Проблема с реактивностью в IE браузере

Question

Есть данные которые получаю со стороны сервера каждые 10 секунд в Vuex хранилище:

Из него вытаскиваю данные в нутрь компонента через вычисляемое св-во:

 computed: {

    trackingStatusId: function () {
      return this.$store.state.tracking.trackingServerData.tracking_status_id;
    },
  },

Далее я пытаюсь работать с этими данными внутри метода: А сам метод навешиваю на св-во стилей в html блоке(<i class="state" :style="getIndicatorWidth()"></i>)

  methods: {

    getIndicatorWidth: function () {

      function widthCalculate(currentTrackingStatusId){

        console.log(currentTrackingStatusId);

      }

      return widthCalculate(this.trackingStatusId);

    },
  },

Теперь обращаем внимание на вот эту строку в выше приведенном коде:

console.log(currentTrackingStatusId);

Если я получаю измененные данные с сервера - то значение внутри консоли лог изменяется реактивно и во всех браузерах кроме IE-11(и ниже).

Получение данных от сервера выглядит следующим образом: (навешено на хук mounted ())

methods: {

    getTrackerIntervalData () {

        setInterval(()=>myTimer(this), 5000);

        function myTimer(th) {
             return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + th.$route.params.tracking.toLowerCase() , {
             })
            .then(response => {
              th.$store.commit('tracking/setTrackingServerData', response.data.data.tracking_data);
            })
            .catch(function (error) {
              console.log(error);
            });
        }
    },
  }

Vuex хранилище:

const axios = require("axios");

export const state = () => ({

    trackingServerData: null,

});

export const mutations = {

    setTrackingServerData (state, trackingServerData) {
        state.trackingServerData = trackingServerData;
    },
};

Так же я дублирую самый первый запрос со стороны middleware что бы иметь возможность работать с данными при отрисовке дом дерева:

export default function ({$axios, req, store, route}) {

  if(req != undefined) {
      store.commit('setIsFirstServerLoad', true);
  }

  else{
      store.commit('setIsFirstServerLoad', false);
  }

  if(route.name == "language-tracker-tracking") {

      return $axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + route.params.tracking.toLowerCase(), {})
          .then(response => {
              store.commit('tracking/setTrackingServerData', response.data.data.tracking_data);
          })
          .catch(function (error) {
              console.log(error);
          });

  }

}

В итоге если посмотреть на ситуацию глубже получается что IE браузер правильно вычисляет только код полученный от мидлваре:

в выше приведенном скриншоте можно наблюдать что ответ 8 - является корректным - а ответ 3 является вообще не понятно откуда взятым. (возможно даже с прошлой страницы с хранилища - хотя там у меня было отдельное хранилище для нее. Даже нет идей почему так происходит.)

Вопрос:

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

БЛОГ НА HUSL

Проблема с реактивностью в IE браузере

Ответы (0 шт):