Vue JS 返回 [__ob__: Observer] 数据而不是我的对象数组 [英] Vue JS returns [__ob__: Observer] data instead of my array of objects
问题描述
我创建了一个页面，我想通过 API 调用从数据库中获取我的所有数据，但我对 VueJS 和 Javascript 也有点陌生，我不知道我哪里出错了.我确实使用 Postman 对其进行了测试，并得到了正确的 JSON.
这是我得到的:
[__ob__:观察者]长度:0__ob__: 观察者 {value: Array(0), dep: Dep, vmCount: 0}__proto__:数组这就是我想要的:
(140) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}、{…}, {…}, {…}, …][0 … 99][100 … 139]长度:140__ob__: 观察者 {value: Array(140), dep: Dep, vmCount: 0}__proto__:数组那是我的 Vue 模板文件:
<div><h2>赛鸽舍的鸽子</h2><div class="card-content m-b-20" v-for="鸽子中的鸽子" v-bind:key="pigeon.id"><h3>{{pig.id }}</h3><脚本>导出默认{数据(){返回{鸽子: [],鸽子: {ID: ''，性别:'',color_id: '',模式 ID: '',用户身份: ''，loft_id: '',国家: ''，经验: ''，形式: ''，疲劳:''},鸽子_id:''}},创建(){this.fetchPigeons();控制台日志(这个.鸽子)；//这里我得到了观察者数据而不是我的数组},方法: {获取鸽子(){获取('api/racingloft').then(res => res.json()).then(res => {控制台日志(res.data)；//这里我得到了我需要的this.pigeons = res.data;})}}}
我也试过用 axios 来做，但它给了我完全一样的东西.当我从方法中安慰它时，它给出了我的数据，但在它之外什么也没给出.
也可以试试这个:
var parsedobj = JSON.parse(JSON.stringify(obj))控制台日志(解析对象)但等待答案是第一步.
I've created a page where I want to get all my data from the database with an API call, but I'm kinda new to VueJS and Javascript aswell and I don't know where I'm getting it wrong. I did test it with Postman and I get the correct JSON back.
This is what I get:
[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array
This is what I want:
(140) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
[100 … 139]
length: 140
__ob__: Observer {value: Array(140), dep: Dep, vmCount: 0}
__proto__: Array
Thats my Vue template file:
<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>
I've tried to do it with axios aswell, but it gave me exactly the same thing. When I console it from the method it gives my data, but outside it just gives nothing.
Can also try this:
var parsedobj = JSON.parse(JSON.stringify(obj))
console.log(parsedobj)
It was brought by Evan You himself here and more info on that here
But waiting for the answer is a first step.
这篇关于Vue JS 返回 [__ob__: Observer] 数据而不是我的对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
