IE 浏览器中的反应性问题

Question

There is data that I receive from the server every 10 seconds in the Vuex repository:

From it I pull the data into the inside of the component through the calculated property:

 computed: {

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

Next, I try to work with this data inside the method: And the method itself is attached to the styles in the html block( <i class="state" :style="getIndicatorWidth()"></i> )

  methods: {

    getIndicatorWidth: function () {

      function widthCalculate(currentTrackingStatusId){

        console.log(currentTrackingStatusId);

      }

      return widthCalculate(this.trackingStatusId);

    },
  },

Now we pay attention to this line in the above code:

console.log(currentTrackingStatusId);

If I get changed data from the server, then the value inside the console log changes reactively in all browsers except IE-11 (and below).

Getting data from the server is as follows: (hung on a lifecycle hook 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 repository:

const axios = require("axios");

export const state = () => ({

    trackingServerData: null,

});

export const mutations = {

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

I also duplicate the first request from middleware to be able to work with data when rendering a DOM tree:

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);
          });

  }

}

As a result, if you look at the situation deeper, it turns out that the IE browser correctly calculates only the code received from middleware:

in the above screenshot, you can observe that the answer 8 - is correct - and the answer 3 is generally not clear where it came from. (maybe even from the last page from the repository - although I had a separate repository for it there. I have no idea why this happens.)

Question:

Why data is not updated correctly in IE browsers?
How can this be fixed or is it possible to get around this problem - to implement everything differently?

Answer 1

the problem is here

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);
            });
        }
    }

IE dosent support arrow function. you should do it like so

getTrackerIntervalData () {
let vm=this;
        setInterval(function(){myTimer(vm)}, 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);
            });
        }
    }

because vue use webpack. normally arrow function will be transform to normal function to support all browsers but maybe for some reason the setInterval with arrow function not transform. try it maybe that the problem