vuejs中ajax渲染全局,vuejs用ajax取回的数据不能渲染

这样可以正常渲染：

<div class="container" id="app">

<ol>

<li v-for="(todo,index) in todos">

{{ index }} {{ todo.text }}

</li>

</ol>

</div>

<script>

new Vue({

el: '#app',

data: {

todos: [

{ text: 'Learn JavaScript' },

{ text: 'Learn Vue' },

{ text: 'Build something awesome' }

]

}

});

</script>

下面把数据改为ajax(使用的axios发送ajax请求：https://github.com/mzabriskie…取回，就不能显示在html中了，

console.log(response);

是能够看到取回的数据的。

<div class="container" id="app">

<ol>

<li v-for="(todo,index) in todos">

{{ index }} {{ todo.text }}

</li>

</ol>

</div>

<script>

new Vue({

el: '#app',

data: {

todos: []

},

mounted: function () {

this.$nextTick(function () {

axios.get('/articles')

.then(function (response) {

console.log(response.data);

this.todos = response.data;

})

.catch(function (error) {

console.log(error);

});

});

}

});

</script>

console.log(response.data);

是这样的：

…]

下面这样模拟是可以工作的：

<div class="container" id="app">

<ol>

<li v-for="(todo,index) in todos">

{{ index }} {{ todo.text }}

</li>

</ol>

</div>

<script>

new Vue({

el: '#app',

data: {

todos: []

},

mounted: function () {

this.$nextTick(function () {

var arr=[

{ text: 'Learn JavaScript' },

{ text: 'Learn Vue' },

{ text: 'Build something awesome' }

];

this.todos = arr;

});

}

});

</script>