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中的检查员，我可以看到我得到的数据看起来像这样：

数组2 0：Object1：Object__ob__：Observerlength：2__proto__：Array

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

可能有什么不对？感谢

编辑：添加发送到我的客户端的对象数组的屏幕截图。可能是VuejS没有正确读取它的结构吗？

EDIT2：

这是Vue Dev Tools的屏幕截图。一切看起来都不错？

Answer 1

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

尽管如此，您可能需要考虑将模板标记转换为单独的tempalte。你的代码看起来像这样：

<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>

如何阅读MongoDB的VueJs结果

1 个答案: