Vue.js中用{{}}无法取出值

一、问题

今天做项目时，发现自己通过axios获取到的数据，无法渲染到页面上面，以前都是没问题的，并且通过console打印和alert弹出来也是没问题的。

二、解决方案

<script type="text/javascript">
    var app = new Vue({  3         el: '#app',  4  data: {  5  user: {}  6  },  7         created: function () {  8             this.getUserInfo();  9  }, 10  methods: { 11             getUserInfo: function () { 12                 var _this = this; 13  axios({ 14                     method: 'get', 15                     url: '/reader/getInfo'
                }).then(function (response) { 17                     _this.user = response.data; 18  }) 19  } 20  } 21  }); 22 </script>

三、原因分析

原因：执行了axios后，在axios回调函数中使用this，其指向的不是当前vue实例，而是axios对象。所以会出错。

解决：在axios外部使用了_this来指向当前vue实例，这样取出axios值赋值外部vue实例参数的时候，就可以用_this了。