Question

首先让我解释一下我的用例，我在数据上有一个fee_map attr，这是一个对象列表，其中包含有关学生必须支付的费用，余额，支付模式等以及计算属性的数据，让我们说' updateOptions'返回一个id和text的对象列表，适合填充select2（支付模式），现在每当用户做某事时，都会调用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没有更新新值。我在这里做错了什么？

Answer 1

你的物体对象比你迭代的深一级。因此，当你有fee_map [t] .details [f]时，f是关键字＆＃34;详细信息＆＃34;并且细节[＆＃34;细节＆＃34;]未定义。你需要为细节对象做一个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";
      });
    });
  });

Answer 2

经过多次努力，我发现代码在循环中过快地更新数据，但不知何故vue只在下一个tick上检测到更改，所以我不得不调用自调用函数作为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);

数据未在Vuejs中更新

2 个答案: