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

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

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

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

Редактировать: Также, как указал @barbsan в своем комментарии ниже, ваш fetchPigeons должен возвращать обещание, что then будет работать. fetch возвращает обещание, поэтому вам просто нужно вернуть выборку в fetchPigeons

fetchPigeons(){
    return fetch('api/racingloft')
    .then(res => res.json())
    .then(res => {
        console.info(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.info(parsedobj)

Его принес сам Эван Ю здесь и больше информации об этом здесь

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

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

добавьте новый метод, например log, в ваш компонент $ root. App.vuecreated рекомендуется:

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.info(...arguments);
};

просто вызовите this.$root.log(this.pigeons) в своем компоненте.

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

ДО:

ПОСЛЕ:

Как упоминал Хусам Ибрагим, вам следует дождаться разрешения функции async fetch (). Другой подход может заключаться в использовании async / await в вашей функции:

methods: {
    async fetchPigeons(){
        await fetch('api/racingloft')
               .then(res => res.json())
               .then(res => {
                   console.info(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".

const cookieInfo = ToolCookieService.getToolNumbersFromCookie();

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

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

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

У меня та же проблема все еще застряла ...

Написал их в соответствии с методом Эвана (Vue Author) JSON.parse (JSON.stringify (res.data)), но почему не могут нормальные данные?

  methods: {
    async getdata() {
      console.info(1);
      await axios.get(API).then((res) => {
          console.info(2);
          if (!this.dataList.length) {
            this.dataList = JSON.parse(JSON.stringify(res.data));
            console.info(3);
            console.info(res.data, 'res.data ');
            console.info(this.dataList, 'this.dataList')
            console.info('----------check-----------',JSON.parse(JSON.stringify(res.data)));
          }
        })
        .catch(err => {
          console.error('failed: ' + err);
        })
      console.info(4);
    },

Если ваша цель - отладка того, ЧТО включено в экземпляр Observer Vue, это мое решение:

Print out that variable in template block belongs to your Component

После этого вы можете переформатировать структуру вывода, чтобы рассмотреть детали.

Например:

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

Другой способ, если вы хотите увидеть это в console, вы должны перевести console.info в фазу mounted. Потому что на этапе createdthis.pigeons все еще пуст. Ссылка: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Надеюсь, это поможет.

Самый лучший способ

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

Или

obj2 = Object.assign([], obj)

Его принес сам Эван Ю здесь и подробнее

По сути, вы сделали то, что функция извлекает массив голубей, но, поскольку он работает параллельно, вы вызвали console.info. Легко исправить:

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