Vue JS возвращает данные [__ob__: Observer] вместо моего массива объектов

Question

Я создал страницу, на которой я хочу получить все свои данные из базы данных с помощью вызова API, но я также немного новичок в VueJS и Javascript, и я не знаю, где я ошибаюсь.Я проверил это с Почтальоном, и получил правильный 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

Ну, у меня была точно такая же проблема, но я решил ее:

Просто переместите app.js внешнюю ссылку на заголовок тега.

Answer 2

Как упоминал Хусам Ибрагим, вам следует дождаться разрешения функции 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 3

Спасибо за все ваши предложения.У меня все получилось, просто используя " const ".

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

Спасибо, Ранджит

Answer 4

Вот мое решение:

добавьте новый метод, например, 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) в вашем компоненте.

Мой результат:

ДО:

ПОСЛЕ:

Answer 5

Можно также попробовать это:

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

Это принес сам Эван Вы здесь

Но ожидание ответа - первый шаг.

Answer 6

Вы можете использовать директиву v-if для рендеринга компонента, когда данные там есть.

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

Answer 7

Это происходит потому, что Vue js преобразует каждый элемент данных в нечто, что можно наблюдать.Так что имеет смысл, если вы что-то утешаете в данных.Вывод будет заключен в нечто вроде наблюдателя.

Чтобы иметь лучшее представление о ваших данных, я предлагаю вам установить инструменты Vue dev.https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

Answer 8

Вам, вероятно, следует дождаться окончания выборки, а затем console.log результата ..

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

Как вы это делали, вы регистрировали результат синхронно, чтобы он выполнялся до завершения выборки.

Редактировать: Также, как @barbsan указал в своем комментарии ниже, ваш fetchPigeons должен вернуть обещание для then для работы.fetch возвращает обещание, поэтому вам просто нужно вернуть 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;
    })
}