如何使用来自 MongoDB 的 VueJs 结果读取

Question

使用 NodeJS，我正在从 MongoDB 检索数据并尝试显示结果列表。检索工作并且数据到达我的html。我可以在 Chrome 中看到一个包含 N 个对象的数组，并且 v-for 指令在我的 HTML 中创建了 N 个项目。 但是，它不能访问数组中每个对象内的字段。都是空的。

这是我的 HTML：

<div id="app">
    <ul class="collection">
        <li v-for="item in items" class="collection-item avatar" :key="item._id">
          <span class="title">{{ item.currencyPair }}</span>
          <p>{{ item.tradeOpenDate }} <br>
             {{ item.tradeDirection}}
          </p>
          <a href="/list/{{ item._id }}" 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>

在服务器中，这是我检索和返回数据的方式：

.get(function(req, res) {
        Journal.find(function(err, jour) {
            if (err)
                res.send(err);

            res.json(jour);
        });
    });  

最后，查看 Chrome 中的检查器，我可以看到我得到了数据，它看起来像这样：

Array20: Object1: Object__ob__: Observerlength: 2__proto__: Array

我很肯定我正在使用正确的名称访问正确的字段名称。

可能出了什么问题？ 谢谢

编辑： 添加发送给我的客户的对象数组的屏幕截图。会不会是它的结构没有被 VuejS 正确读取？

编辑2：

这是 Vue 开发工具的屏幕截图。一切看起来都不错？

Answer 1

您的代码看起来非常好。简化的示例似乎有效，我找不到您的代码的关键区别：https://codepen.io/tuelsch/pen/XRXvZy

尽管如此，您可能需要考虑将您的模板标记转移到一个单独的模板中。您的代码如下所示：

<div id="app"></div>

<template id="list">
    <ul class="collection">
        <li v-for="item in items" class="collection-item avatar" :key="item._id">
          <span class="title">{{ item.pair }}</span>
          <p>{{ item.openDate }} <br>
             {{ item.direction}}
          </p>
          <a href="/list/{{ item._id }}" class="secondary-content"><i class="material-icons">send</i></a>
        </li>    
    </ul>
</template>

<script type="text/javascript">
    var app = new Vue({
      el: '#app',
      template: '#list',
      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>