title: How to read with VueJs result from MongoDB
body: <p>Using NodeJS, I am retrieving data from MongoDB and trying to show the list of result. The retrieval 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.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;ul class="collection"&gt;
          &lt;li v-for="item in items" class="collection-item avatar" :key="item._id"&gt;
            &lt;span class="title"&gt;{{ item.currencyPair }}&lt;/span&gt;
            &lt;p&gt;{{ item.tradeOpenDate }} &lt;br&gt;
               {{ item.tradeDirection}}
            &lt;/p&gt;
            &lt;a href="/list/{{ item._id }}" class="secondary-content"&gt;&lt;i class="material-icons"&gt;send&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;    
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      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: {
  
        }   
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>In the server, this is how I retrieve and return the data:</p>
  
  <pre><code>.get(function(req, res) {
          Journal.find(function(err, jour) {
              if (err)
                  res.send(err);
  
              res.json(jour);
          });
      });  
  </code></pre>
  
  <p>And, finally, looking at the inspector in Chrome, I can see that I get the data and it looks like this:</p>
  
  <blockquote>
    <p>Array<a href="https://i.stack.imgur.com/4WbZ4.png" rel="nofollow noreferrer">2</a>0: Object1: Object__ob__: Observerlength: 2__proto__: Array</p>
  </blockquote>
  
  <p>I am positive I am accessing the right field names, with the correct names. </p>
  
  <p>What could be wrong?
  Thanks</p>
  
  <p>EDIT:
  Adding the screenshot of the array of objects that is sent to my client. Could that be that its structure is not correctly read by VuejS?</p>
  
  <p><a href="https://i.stack.imgur.com/7mHuT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7mHuT.png" alt="enter image description here"></a></p>
  
  <p>EDIT2: </p>
  
  <p>This is the screenshot of the Vue Dev Tools. Everything looks good?</p>
  
  <p><a href="https://i.stack.imgur.com/4WbZ4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4WbZ4.png" alt="enter image description here"></a></p>