在HTML中使用VUE的data中对象类型的变量时，无法正确取值。

初用vue，今天遇到了一个很诡异的现象，最终得以解决，再次记录以免以后再次掉坑。

一、现象描述:

在HTML中取js中定义的vue变量时，在chrom中正常，但在firefox中无法取得值。废话少说，直接上代码：

1、HTML中：是将工作类型码，翻译成工作类型汉字。jobTypeMap中存放的是英文代码与汉字的对照关系。

    

{{jobTypeMap(item.typeCode)}} //标记AA

2、数据的初始化

$(document).ready(function(){

$.ajax({
url:  '...../getJobTypeList',
async:true,     //标记BB
success: function(r){
r.list.forEach(function(item,i){
vm.jobTypeMap[item.typeCode] = item.name; //标记CC
});
}

});

    ..............//标记DD

});

3、JS中vue定义：

var vm = new Vue({
el:'#app',

data:{

            jobTypeMap:{}

        },

         created: function(){ 

            //标记EE

        }

});

现象：上述代码，html处的{{jobTypeMap(item.typeCode)}}，在chrom中能正常取值，在firefox中无法正常取值。

经过无数次各种尝试后，我就想为毛firefox无法取到值呢？加入跟踪日志，同时，将html中的取值改为计算属性取值，发现在firefox中，html中AA处的取值动作是发生在【标记CC】之前，而在chrom中的顺序相反，所以chrom中能正常取值。难道是firefox运行效率太慢的原因吗？反正是将BB处的改为async:flase（改为flase后$(document).ready中会等待CC处执行完才会执行后续DD处的js代码）也不行。

重新回头看伟大的vue生命周期图，我就在想是不是data内的数据应该在$.mount之前做初始好，如果是这个原因，那么我在CC后面调用一下vm.$mount("#app");是否就可以了呢，经过测试，发现果真问题解决了，在firefox中能正确取值了。

最后解决：

方式一：在created中初始化 jobTypeMap，不能放在$(document).ready中。

方式二：如果一定要放在$(document).ready中，则在CC处，调用一下vm.$mount("#app")，重新绑定一下。