Using NodeJS, I am retrieving data from MongoDB and trying to show the list of result. The retrival works and the data arrives to my html. I can see in Chrome an array with N objects and the v-for directive creates N items in my HTML. But, it can't access the fields inside each object in the array. It's all empty.
This is my HTML:
<div id="app">
<ul class="collection">
<li v-for="item in items" class="collection-item avatar" :key="item._id">
<span class="title"></span>
<p> <br>
</p>
<a href="/list/" class="secondary-content"><i class="material-icons">send</i></a>
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items: []
},
mounted: function() {
var that = this;
axios.get('/api/journal')
.then(function(response) {
if(response.status = 200) {
that.items = response.data;
console.log(that.items);
} else {
console.log('error');
}
})
.catch(function(error) {
console.log(error);
});
},
methods: {
}
})
</script>
In the server, this is how I retrieve and return the data:
.get(function(req, res) {
Journal.find(function(err, jour) {
if (err)
res.send(err);
res.json(jour);
});
});
And, finally, looking at the inspector in Chrome, I can see that I get the data and it looks like this:
Array[2]0: Object1: Object__ob__: Observerlength: 2__proto__: Array
I am positive I am accessing the right field names, with the correct names.
What could be wrong? Thanks
via Felipe Caldas
No comments:
Post a Comment