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

一、问题

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

二、解决方案

 1 <script type="text/javascript">
 2     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'
16                 }).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了。