[Vuejs]-Data not updating in Vuejs

by

0👍

Your object of objects is one level deeper than you were iterating over. So when you have fee_map[t].details[f], f is the key “details”and details[“details”] is undefined. You need to do a foreach for the details object as well as can be seen here.

https://jsfiddle.net/50wL7mdz/78427/

var fee_map = this.fee_map;
  t_keys = Object.keys(fee_map);
  t_keys.forEach(function(t){
    f_keys = Object.keys(fee_map[t]);
    f_keys.forEach(function(f){
      d_keys = Object.keys(fee_map[t][f]);
      d_keys.forEach(function(d){
         fee_map[t].details[d].option_selected = "5";
      });
    });
  });

0👍

After lot of struggle I found code is updating data too quickly in a loop, but somehow vue is detecting changes only on the next tick, so I had to call a self invoking function as a wrapper to Vue.nextTick to preserve the context and update the selected_option inside the Vue.nextTick callback and that is working perfect.

working code below

(function(fee, ref){
    console.log("Registering vue tick");
    Vue.nextTick(function(){
       console.log("Vue ticked, updating selected option");
       fee.option_selected = ref;
    });
})(fee, ref);

Leave a comment