Vue JS返回[__ob__：Observer]数据而不是我的对象数组

Question

我已经创建了一个页面，我想通过API调用从数据库中获取所有数据，但是我对VueJS和Javascript也很陌生，我也不知道我在哪里弄错了。我确实使用Postman进行了测试，并且获得了正确的JSON。

这是我得到的：

[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array

这就是我要的：

(140) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
[100 … 139]
length: 140
__ob__: Observer {value: Array(140), dep: Dep, vmCount: 0}
__proto__: Array

那就是我的Vue模板文件：

<template>
    <div>
        <h2>Pigeons in the racing loft</h2>
        <div class="card-content m-b-20" v-for="pigeon in pigeons" v-bind:key="pigeon.id">
            <h3>{{ pigeon.id }}</h3>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            pigeons: [],
            pigeon: {
                id: '',
                sex: '',
                color_id: '',
                pattern_id: '',
                user_id: '',
                loft_id: '',
                country: '',
                experience: '',
                form: '',
                fatique: ''
            },
            pigeon_id: ''
        }
    },
    created(){
        this.fetchPigeons();
        console.log(this.pigeons); // Here I got the observer data instead my array
    },

    methods: {
        fetchPigeons(){
            fetch('api/racingloft')
            .then(res => res.json())
            .then(res => {
                console.log(res.data); // Here I get what I need
                this.pigeons = res.data;
            })
        }
    }
}
</script>

我也尝试过使用axios做到这一点，但是它给了我完全相同的东西。当我从方法中进行控制台操作时，它提供了我的数据，但是在外部它什么也没有提供。

Answer 1

也可以尝试以下方法：

var parsedobj = JSON.parse(JSON.stringify(obj))
console.log(parsedobj)

它被带到埃文你自己在这里和更多的信息在这里

但是等待答案是第一步。

Answer 2

这是我的解决方案：

log向您的 $root 组件添加类似的新方法。App.vue的created推荐：

this.$root.log = function log() {
  for (let i = 0; i < arguments.length; i += 1) {
    if (typeof (arguments[i]) === 'object') {
      try {
        arguments[i] = JSON.parse(JSON.stringify(arguments[i]));
      } catch (e) {
        console.error(e);
      }
    }
  }
  console.log(...arguments);
};

只需调用this.$root.log(this.pigeons)您的组件。

我的结果：

前：

后：

Answer 3

发生这种情况是因为Vue js将数据中的每个项目都转换为可以观察到的内容。因此，如果您在数据中控制台记录某些内容，这是有意义的。输出将是包装到观察者中的东西。

为了更好地了解您的数据，建议您安装Vue开发工具。 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN

Answer 4

您可能应该等待提取完成，然后 console.log 结果..

created(){
    this.fetchPigeons().then(() => console.log(this.pigeons));
},

您这样做的方式是同步记录结果，以便在获取完成之前执行它。

编辑：正如 @barbsan 在下面的评论中指出的那样，您需要返回工作fetchPigeons承诺。返回一个承诺，所以你只需要返回 fetch inthenfetchfetchPigeons

fetchPigeons(){
    return fetch('api/racingloft')
    .then(res => res.json())
    .then(res => {
        console.log(res.data); // Here I get what I need
        this.pigeons = res.data;
    })
}