数据未在 Vuejs 中更新答案

【问题标题】：Data not updating in Vuejs数据未在 Vuejs 中更新
【发布时间】：2017-11-23 09:42:04
【问题描述】：

让我从解释我的用例开始，我有一个关于数据的 fee_map 属性，它是一个对象列表，其中包含有关学生必须支付的费用、余额、支付模式等的数据，以及一个计算属性，让我们说' updateOptions' 返回一个对象列表，其中包含适合填充 select2（支付模式）的 id 和文本，现在每当用户执行某项操作时，都会调用 updateOptions。而在其他一些用户操作上，程序会选择选中的选项并将其设置在fee_map上，fee_map的结构如下。

data: {
    fee_map: {
        1: {
            details:{
                1: {
                    option_selected: "1",
                }
            }
            // other_attr
        },
        2: {
            details:{
                1: {
                    option_selected: "2",
                }
            }
            // other_attr
        },
    }

我有一个 UpdateSelected 方法，它将更新选择，我在其中通过获取键并使用 forEach 循环遍历 fee_map。然后将所选选项设置如下

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

现在，当我从这里更新 option_selected 时，我的 fee_map 不会更新为新值。我在这里做错了什么？

【问题讨论】：

标签： javascript vue.js vuejs2 jquery-select2

【解决方案1】：

你的对象比你迭代的更深一层。所以当你有 fee_map[t].details[f] 时，f 是关键的“details”，而 details[“details”] 是未定义的。你需要为 details 对象做一个 foreach 并且可以在这里看到。

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

【讨论】：

你好，mthomp，很抱歉造成混乱，我实际上正在获取详细信息的密钥，我刚刚更正了。我有 10 个不同的属性，比如费用金额、余额等。我可以在同一个函数中更新它们中的每一个，但不能在 selected_option 中更新它们。不过感谢您的回答。
奇怪的是，尝试从控制台更新时它工作正常，但在该功能中不起作用。
抱歉耽搁了，我可以使用上面的功能更新选定的选项。我在小提琴中控制fee_map，并将其设置为“5”。请您对现在正在发生的问题更清楚一点
你好 mthomp，发现我的代码出了什么问题。我试图在循环中过快地更新 vue 数据，但不知何故 vue 只在下一个滴答声中检测到变化，所以我不得不调用一个自调用函数作为 Vue.nextTick 的包装器来保留上下文并更新里面的 selected_option Vue.nextTick 回调，效果很好。不过谢谢

【解决方案2】：

经过一番努力，我发现代码在循环中更新数据的速度太快了，但不知何故，vue 只在下一个滴答声中检测到变化，所以我不得不调用一个自调用函数作为 Vue.nextTick 的包装器来保留上下文并更新 Vue.nextTick 回调中的 selected_option ，这是完美的。

下面的工作代码

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

【讨论】：