Currently, I am utilizing vue.js version 2.0, and the demo provided below is fully functional.
<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>
Utilizing axios (https://github.com/mzabriskie/axios) for AJAX requests to retrieve backend data, although the data is visible in the console, it's not displaying on the view. https://i.stack.imgur.com/XH4Tm.png
<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);
this.todos = response.data;
})
.catch(function (error) {
console.log(error);
});
});
}
});
</script>
In addition, the provided simulation is also operational.
<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>