vue通过ajax方式获取数据后报“TypeError”错，为何？

Question

目前页面能正常显示，就是控制台老是报一行红色错误，我知道问题肯定出在变量类型，但我不知道应该如何解决。

<div id="app">
        {{mydata.tit}} <br>
        {{mydata.sec0.tit}}
        </div>
    
    <script>
    vm = new Vue({
      el: '#app',
      data: {
        mydata: {}
      }
    })

    Vue.http.get('./data/yfh.json').then(
        function(e) {
            vm.mydata = e.data;
        });

    </script>

yfh.json

{
    "tit":"1234",
    "sec0": {
        "tit":"5678"
    }
}

Answer 1

在你的ajax获取到数据之前

mydata.sec0.tit

不会报错？这个时候这段代码等于

undefined.tit

Answer 2

为什么要e.data? 这里看结构的话直接 vm.mydata = e;

Answer 3

解决方式：

        var vm= new Vue({
            el:"#app",
            data:{
                mydata: {
                    tit:"",
                    sec0:{tit:""}
                }
            }
        });