web-dev-qa-db-ja.com

Vue JSは、オブジェクトの配列ではなく[__ob__：Observer]データを返します

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でそれをやろうとしましたが、まったく同じことができました。メソッドからコンソールを操作すると、データが提供されますが、外部では何も提供されません。

javascriptarrayslaravelvue.jsaxios
17
shawnest

これは、Vue jsがデータ内のすべてのアイテムを監視可能なものに変換するために発生します。そのため、データにコンソールログを記録するのは理にかなっています。出力は、オブザーバーにラップされたものになります。

データをよりよく理解するために、Vue devツールをインストールすることをお勧めします。 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

6
Kevin LE GOFF

これも試すことができます：

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

エヴァン・ユー自身によってもたらされた ここ

しかし、答えを待つことが最初のステップです。

4
guillim

おそらく、フェッチが完了するのを待ってから、結果をconsole.logする必要があります。

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

それを行う方法では、結果が同期的にログに記録されるため、フェッチが完了する前に結果が実行されます。

編集：また、@ barbsanが以下のコメントで指摘したように、fetchPigeonsはthenが機能するための約束を返す必要があります。 fetchはpromiseを返すので、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;
    })
}
3
Husam Ibrahim

ご提案ありがとうございます。私の目的は、「const」を使用するだけでうまくいきました。

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

ありがとう、ランジット

1
ranjit0829

私の解決策は次のとおりです。

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)を呼び出すだけです。

私の結果：

前：

enter image description here

AFTER：

enter image description here

1
mudin

v-ifディレクティブを使用して、データがあるコンポーネントをレンダリングできます。

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

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>
0
André Ravazzi