使用vue2.0 + vue-resource时报错

Question

使用vue2.0 + vue-resource时报错，用vue1.0时，请求放在ready中并不会报错。
辛苦了。帮忙看一下，谢谢！

报错：

Uncaught TypeError: Cannot read property 'title' of undefined

代码：

<div id="app" class="app">
  <h1 class="title">{{datas.communityDetail.title}}</h1>
</div>
<script src="//cdn.bootcss.com/vue/2.1.5/vue.min.js"></script>
<!--<script src="//cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>-->
<script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function(){
      return {
        datas: {}
      }
    },
    mounted: function () {
      this.getData();
    },
    methods: {
      //请求数据
      getData: function () {
        var self = this;
        this.$http.get('api.json', {
          params: {
            OPT: '305'
          }
        }).then(function(response) {
          self.datas = response.data;
        },function() {
          console.log('error')
        });
      }
    }
  })
</script>

Answer 1

data: function(){
  return {
    datas: {
        communityDetail:{}
    }
  }
},

datas里又套了一层就不报错了。这个是什么原理？

Answer 2

看样子应该是渲染时数据中还没有title这个字段，你可以把

mounted: function () {
  this.getData();
},

改成：

//es6
created() {
    this.getData();
}
//es5
created:function() {
    this.getData();
}

试试。