Firebase Firestore возвращает обещание в Vue

Question

Я пытаюсь использовать данные из Firestore. Раньше он работал, теперь в Vuetify я продолжаю получать 'PENDING', если пытаюсь получить доступ к $ data.users

    export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    db.collection('users').get().then((snapshot) => {
      snapshot.forEach((doc) => {
        const user = doc.data();
        user.id = doc.id;
        this.users = user;
        console.log(user.documents.selfie.url); // Here the log return the value correctly
      });
    });
  },
  methods: {
    imageUrl(user) {
      console.log(user.documents.selfie.url); // Here the log return "Pending";
    },

Внутри шаблона я запускаю v-for (user, index) in users :key='index'

ERROR :

Uncaught (in promise) TypeError: Cannot read property 'selfie' of undefined

Answer 1

Трудно быть на 100% уверенным, не воспроизводя вашу проблему, но я думаю, что проблема связана с тем, что обещание, возвращаемое асинхронным get() методом, еще не выполнено при вызове метода imageUrl(). Вот почему вы получаете значение pending.

Одна из возможностей решения, это проверка следующим образом:

  methods: {
    imageUrl(user) {
      if (user) {
         console.log(user.documents.selfie.url);
      } else {
         //...
      }
    },

---

Кроме того, похоже, вы хотите заполнить пользователей Массив с документами из коллекции users. Вы должны сделать следующее:

  created() {
    db.collection('users').get().then((snapshot) => {
      let usersArray = [];
      snapshot.forEach((doc) => {
        const user = doc.data();
        user.id = doc.id;
        usersArray.push(user);
        console.log(user.documents.selfie.url); // Here the log return the value correctly
      });
      this.users = usersArray;
    });
  },

С вашим текущим кодом вы назначаете последнего пользователя в l oop, а не список пользователей.