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

小开

您可能应该等待提取结束，然后 console. 记录结果。

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

按照您的方式，您将同步记录结果，以便在提取完成之前执行结果。

编辑: 也正如@barbsan 在下面的评论中指出的，你的 fetchPigeons需要返回一个让 then工作的承诺。fetch返回一个承诺，所以您只需要返回 fetchPigeons中的提取

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 js 将数据中的每个项目都转换为可以观察到的内容。因此，如果您控制台在数据中记录某些内容，那么这是有意义的。输出将包装到观察器中。

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

小开

一旦有了数据，就可以使用 v-if指令来呈现组件。

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

小开

也可以试试这个:

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

这是由埃文尤本人带来的给你和更多关于给你的信息

But waiting for the answer is a first step.

小开

我的解决办法是:

向 $root 组件添加类似于 log的新方法。建议使用 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)。

我的结论是:

BEFORE:

之后:

小开

As mentioned by Husam Ibrahim, you should wait the async fetch() function to resolve. Another approach could be use async/await in your function:

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>

小开

谢谢你所有的建议。事情工作在我这边只是使用“ 康斯特”。

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

谢谢, Ranjit

小开

Well I had exactly same problem but I solved it:

只要移动 app.js外部链接到头标签。

小开

我还是有同样的问题。

这些是根据 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);
},

小开

If your goal is debugging WHAT included in Observer Vue instance, this is my solution:

在 template块中打印属于您的组件的变量

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

例如:

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

另一种方法是，如果你想在 console中看到它，你应该把 console.log放到 mounted阶段。因为在 created阶段，this.pigeons仍然是空的。参考文献: < a href = “ https://v2.vuejs.org/v2/guide/instance.html # LifCycle-Diagram”rel = “ nofollow norefrer”> https://v2.vuejs.org/v2/guide/instance.html#lifecycle-diagram

希望这对你有帮助。

小开

The best way possible

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

或者

obj2 = Object.assign([], obj)

这是由埃文尤本人带来的给你和更多的信息

小开

基本上，您所做的就是函数获取鸽子数组，但是当它并行运行时，您调用了 console.log。简单的解决办法:

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

小开

如果你返回的是一个对象，而不是一个数组，并且它定义了关键道具:

data () {
return {
object: {
definedKey: [],
anotherDefinedKey: []
}
}
}

尝试检查获取返回的键是否与对象中定义的键相同，如果不满足对象定义的键，Vue 将假定您仍在等待它们。

小开

这是个好问题。我确实面临同样的问题，这应该是由于异步返回之前和之后创建了两个对象 id。

可以通过分解成两个函数而不是在一个函数中完成来解决

created(){
this.fetchPigeons();
console.log(this.pigeons); // Here I got the observer data instead my array
},


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




}