Vue JS: Async ждет с VUE JS возвращает наблюдателя

Question

В настоящее время я пытаюсь получить данные из API и прочитать их в массиве.Проблема заключается в том, что, когда я регистрирую данные ответа от API, он показывает данные.Я присваиваю значение переменной данным из await.Когда я console.log, это показывает, что значение переменной является наблюдательным.Я пробовал с async/await.Установлено

"babel-plugin-transform-regenerator": "^6.26.0",
"babel-polyfill": "^6.26.0"

---

const baseUrl = "http://...";
    export default {
      name: "report",
      data() {
        return {
          selected: "",
          categories: []
        };
      },
      created() {},
      methods: {
        async getCategories() {
          this.categories = await axios
            .get(`${baseUrl}/feedback/search`)
            .then(res => {
              return res.data;
            });
        }
      },
      mounted() {
        this.getCategories(); // removed and tried adding this line again
        console.log("cat ", this.categories);
      }
    };

Вот что я получаю: cat -> [__ob__: Observer] Этот метод также, кажется, не помогает.Что я делаю не так?

Я борюсь с этой проблемой в течение нескольких часов. Проверено много опций в stackoverflow, но ни один из них не работает (или я что-то делаю неправильно).Я новичок в vuejs, я был бы очень рад ответам!

Answer 1

Не могли бы вы попробовать это?

const baseUrl = "http://...";
export default {
  name: "report",
  data() {
    return {
      selected: "",
      categories: []
    };
  },
  created() {},
  methods: {
    async imageCategories() {
      this.categories = await axios
        .get(`${baseUrl}/feedback/search`)
        .then(res => {
          return res.data;
        });
    }
  },
  async mounted() {
  await this.getCategories(); // removed and tried adding this line again
    console.log("cat ", this.categories);
  }
};

Answer 2

Вы можете просто войти после получения данных

async getCategories() {
   const res = await axios.get(`${baseUrl}/feedback/search`)
   const data = await res.data
   console.log('cat ',data)
   this.categories = data
}

Answer 3

Вы регистрируете this.categories до разрешения this.getCategories(), и в этом случае this.categories все равно будет пустым массивом.Обратите внимание, что свойство __ob__ автоматически вставляется Vue и используется для реактивности.

Вы должны await этот метод заранее:

async mounted() {
  await this.getCategories();
  console.log("cat ", this.categories);
}

demo