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

JavaScript

文韬武略辛弃疾

2020-03-11

我已经创建了一个页面,我想通过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来做,但是它给了我完全一样的东西。当我从方法中进行控制台操作时,它提供了我的数据,但在外部它什么也没有提供。

第757篇《Vue JS返回\[__ob__:Observer\]数据而不是我的对象数组》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
小胖Itachi西里 2020.03.11

好吧,我有完全相同的问题,但我解决了:

只需将app.js外部链接移动到head标签。

GO小胖GO 2020.03.11

如果您的目标是调试ObserverVue实例中包含的内容,这是我的解决方案:

打印出该template中的变量属于您的组件

之后,您可以重新格式化输出的结构以观察细节。

例如:

<template>
  <div>
    {{ pigeons }}
  <div>
</template>

换句话说,如果您想在中看到它console,则应该console.log进入mounted阶段。因为在created阶段,this.pigeons仍然是空的。参考:https : //vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

希望对您有所帮助。

梅番长 2020.03.11

v-if一旦数据存在,您就可以使用指令来呈现组件。

<h3 v-if="pigeons.length > 0">{{ pigeon.id }}</h3>
ItachiHarry 2020.03.11

感谢您的所有建议。仅使用“ const ”,事情就对我有效

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

谢谢,兰吉特

神乐蛋蛋 2020.03.11

也可以尝试以下方法:

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

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

但是等待答案是第一步。

Sam番长逆天 2020.03.11

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android