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

也可以試試這個：

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

它是由 Evan You 本人帶來的，更多信息在這里

但等待答案是第一步。

Answer 2

發生這種情況是因為 Vue js 將數據中的每個項目都轉換為可以觀察到的東西。 因此，如果您控制台在數據中記錄一些內容，這是有道理的。 輸出將是包裹在觀察者中的東西。

為了更好地了解您的數據，我建議您安裝 Vue 開發工具。 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

Answer 3

這是我的解決方案：

在 $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) 。

我的結果：

前：

后：

Answer 4

您可能應該等待獲取完成然后 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 5

最好的方法

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

或者

obj2 = Object.assign([], obj)

它是由 Evan You 本人帶來的，還有更多信息

Answer 6

基本上，您所做的是該函數獲取鴿子數組，但由於它並行運行，您調用了 console.log。 輕松修復：

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

Answer 7

一旦數據存在，您就可以使用v-if指令來呈現組件。

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

Answer 8

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

Answer 9

謝謝你的所有建議。 僅使用“ const ”就可以解決我的問題。

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

謝謝，蘭吉特

Answer 10

我遇到同樣的問題仍然卡住...

這些都是按照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 11

如果您的目標是調試Observer Vue 實例中包含的內容，這是我的解決方案：

打印出template板塊中的變量屬於您的組件

之后，您可以重新格式化輸出的結構以觀察細節。

例如：

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

另一種方式，如果你想在console中看到它，你應該把console.log放到mounted階段。 因為在created階段， this.pigeons仍然是空的。 參考： https ://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

希望這有幫助。

Answer 12

如果您要返回一個對象而不是一個數組，並且它已經定義了關鍵道具：

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

嘗試檢查您的 fetch 返回的鍵是否與您的對象中定義的相同，如果您不滿足對象定義的鍵，Vue 將假定您仍在等待它們。

Answer 13

好吧，我遇到了完全相同的問題，但我解決了：

只需將app.js外部鏈接移動到 head 標簽。