logo标签列表

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

javascriptarrayslaravelvue.jsaxios
136

我创建了一个页面，想要通过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，但结果与现在一样。当我从方法中用console.log打印数据时，它可以显示出来，但在方法外部就没有任何反应了。

请尝试在创建的函数中用其他方法替换掉console.log。 - Farouk M
3
在created()中，您试图记录数据，但在异步获取完成之前，它仍然为空（除了Vue用于检测数据更改的Observable，例如当获取完成时，以便重新渲染组件）。请注意，这里的翻译只是为了让内容更加通俗易懂，但原意并未改变。 - Daniel Beck
那么，问题是什么？今天又遇到了同样的 bug。 - Evgeny Malkov
14个回答
112

也可以尝试这个：

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

这是Evan You本人在这里提出的，更多信息请看这里。

但是等待答案是第一步。

2
为什么这些答案都不能帮助我和提问者解决问题呢？除了 https://dev59.com/v1QJ5IYBdhLWcg3w5KGJ#56013942，我已经尝试了下面所有的答案。我不知道在哪里放置代码。当我使用上述代码时，我得到一个空数组，但是观察器中确实有值的数组。 - Saugat Thapa
这解决了我的问题，谢谢。 - tahnoon
15
是的，谢谢。我使用Vue开发工具。但是当我使用它时，我只看到 <Root> =$vm0，即使我点击它也没有其他东西。 - shawnest
你是否在查看正确的组件？能否添加一个开发工具中所见内容的截图。这将有助于弄清楚发生了什么。 - Kevin LE GOFF
10
以下是我的解决方案：
在您的$root组件中添加新方法，类似于log。建议将created放在App.vue中：
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)。

BEFORE:

enter image description here

AFTER:

enter image description here

6

你应该等待fetch请求完成后再将结果打印到控制台中。

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

你之前的方法是同步记录结果，所以它会在fetch完成之前执行。

编辑： 正如@barbsan在下面评论中指出的那样，你的fetchPigeons需要返回一个promise才能让then起作用。 fetch返回一个promise，所以你只需要在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;
    })
}
【Vue 警告】：created 钩子中的错误：“TypeError: 无法读取未定义的属性 'then'”位于---> <Pigeons>，位于 resources/js/components/Pigeons.vue <Root>我理解这个问题。控制台和渲染都没有显示我有对象。 - shawnest
1
@HusamIbrahim fetchPigeons没有返回Promise，你还需要在fetch之前添加return。 - barbsan
实际上已经解决了问题，但我仍然无法将其呈现到页面上。我不知道问题出在哪里。我正在跟随YouTube视频系列，即使没有返回值也可以正常工作。我不知道我设置了什么不正确的东西。它还向他们显示有关Vuejs数据的信息，在Vue Dev Tools中，而我只看到<root> = $vm0，即使我点击它也是如此。 - shawnest
问题应该很容易解决，因为如果我设置一个消息变量并将其设置为{{message}}，它会显示在页面上。但是，如果我只是使用created或mounted修改数据，我只会得到一个空数组，这就是为什么它不渲染任何内容的原因。 - shawnest
created(){ this.fetchPigeons().then(() => console.log(this.pigeons)); } 之后我得到了数组。 但是当我在模板中放置{{ pigeons }}时，它显示{}。 - shawnest
显示剩余7条评论
4

最佳方式

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

或者

obj2 = Object.assign([], obj)

Evan You 本人在此处提出了这个问题，并提供更多信息。

2
基本上，你所做的是函数获取了鸽子数组，但由于它在并行运行，你调用了console.log。简单修复： 

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

代码无法运行。 - Qiqke
2
您可以使用v-if指令，在数据到位后渲染组件。最初的回答。
<h3 v-if="pigeons.length > 0">{{ pigeon.id }}</h3>
2

正如Husam Ibrahim所提到的，您应该等待async 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>
我们可以使用标准的 Promise 替代 await 吗？ - Shamoon
当然可以，但你可能需要在另一个函数中处理 Promise 的解析。 - Andre Ravazzi
2
感谢您提供的所有建议。在我的情况下，只需使用“const”即可解决问题。最初的回答。
const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

Thanks, Ranjit

1

我仍然遇到相同的问题无法解决...

根据Evan（Vue作者）的建议，我使用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);
    },
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接