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

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

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

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

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

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;
    })
}

Answer 2

这是因为 Vue js 将数据中的每一项都转换为可以观察到的东西。因此，如果您控制台在数据中记录一些内容，这是有道理的。输出将被包裹到观察者中。

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

Answer 3

一旦数据存在，您可以使用v-if 指令来渲染组件。

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

Answer 4

也可以试试这个：

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

它是由 Evan You 本人带来的 here 以及更多关于 here 的信息

但等待答案是第一步。

Answer 5

这是我的解决方案：

将类似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 6

正如 Husam Ibrahim 所说，您应该等待异步 fetch() 函数解析。另一种方法是在你的函数中使用 async/await：

methods: {
    async fetchPigeons(){
        await fetch('api/racingloft')
               .then(res => res.json())
               .then(res => {
                   console.log(res.data);
                   this.pigeons = res.data;
               })
    }
}

然后它应该可以工作了：

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

Answer 7

感谢您的所有建议。仅使用“const”就可以解决问题。

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

谢谢， 兰吉特

Answer 8

好吧，我遇到了完全相同的问题，但我解决了：

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

Answer 9

我遇到同样的问题仍然卡住......

这些都是按照Evan(Vue Author) JSON.parse(JSON.stringify(res.data)) 方法写的，但是为什么不能正常数据呢？

  methods: {
    async getdata() {
      console.log(1);
      await axios.get(API).then((res) => {
          console.log(2);
          if (!this.dataList.length) {
            this.dataList = JSON.parse(JSON.stringify(res.data));
            console.log(3);
            console.log(res.data, 'res.data ');
            console.log(this.dataList, 'this.dataList')
            console.log('----------check-----------',JSON.parse(JSON.stringify(res.data)));
          }
        })
        .catch(err => {
          console.error('failed: ' + err);
        })
      console.log(4);
    },

Answer 10

如果您的目标是调试 Observer Vue 实例中包含的内容，这是我的解决方案：

打印出template 块中属于你的组件的变量

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

例如：

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

另一种方式，如果你想在console 看到它，你应该把console.log 放到mounted 阶段。 因为在created 阶段，this.pigeons 仍然是空的。 参考：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

希望这有帮助。

Answer 11

最好的方法

obj2 = JSON.stringify(obj)
obj3 = JSON.parse(obj2)

或者

obj2 = Object.assign([], obj)

它是由 Evan You 本人带来的 here 以及更多信息

Answer 12

基本上，您所做的是该函数获取鸽子数组，但由于它并行运行，您调用了 console.log。轻松修复：

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