Заполнение поля данными пожарного хранилища в vue - PullRequest
Новая
       46

Заполнение поля данными пожарного хранилища в vue

0 голосов
/ 04 мая 2020

Я создаю простое приложение vue, в котором я регистрирую / регистрирую пользователей, которые перенаправляются на их собственную «специальную» страницу. Я создал коллекцию (с использованием firestore) под названием «Профили», в которой я успешно сохраняю все пользовательские данные в структуре, такой как: 

profiles =>
    ABCDEF1234 (user.uid) =>
        role =>
            customrole: true
        bio: "Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
        etc: "etc"    
        etc: "etc"    
        etc: "etc"

В моем представлении есть вход, где я пытался передать биографию в , поэтому они могут редактировать свою биографию, но я не могу заставить ее извлекать данные из своей жизни. 

  <input
    type="text"
    name="bio"
    placeholder="bio"
    v-model="info.bio"
  />

Я мог бы быть совершенно не в том, как вы должны это сделать, но это что у меня сейчас есть. В моих данных () у меня в настоящее время есть: 

    data() {
        return {
            user: null,

            info: {
                bio:null,
            }
        };
    },

Затем я создал () (возможно, это не правильное место) 

const test = firebase.auth().currentUser
  return {
   info: firebase.firestore().collection('profiles').doc(test.uid)
  }

Я предполагаю, что ошибочно предположил что это "свяжет" профили коллекции с текущим вошедшим в систему пользователем с информацией, а затем будет использовано в моих данных выше, чтобы я мог позвонить как {{info.bio}}. Я все еще очень новичок в vue, и любые полезные советы или конструктивная критика будут с благодарностью приняты.

1 Ответ

1 голос
/ 04 мая 2020

Поскольку вы не показывали много подробностей об общей архитектуре приложения Vue. js, я предполагаю, что firebase.auth().currentUser возвращает текущего пользователя (т.е. пользователь вошел в систему).

Таким образом, следующее должно помочь: 

  mounted: function() {
    const user = firebase.auth().currentUser;
    if (user) {
      firebase
        .firestore()
        .collection("profiles")
        .doc(user.uid)
        .get()
        .then(doc => {
          if (doc.exists) {
            this.info.bio = doc.data().bio;
          } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
          }
        })
        .catch(function(error) {
          console.log("Error getting document:", error);
        });
    }
  }

Извлечение документа из Firestore - это асинхронная операция, которая возвращает Promise. Поэтому вам необходимо использовать метод then(), как описано в документации Firestore , чтобы дождаться разрешения Promise, прежде чем можно будет присвоить значение bio в ваше соответствующее Vue. js свойство данных.

...