FireStore onSnapshot обновляет значения, но не DOM в VueJS

Question

Я слушаю обновления в реальном времени в Vue, используя onSnapshot.Я вижу, что данные загружаются из onSnapshot, но не обновляются в DOM.Это может быть просто глупой ошибкой, я программирую только чуть больше месяца, и я просто чего-то не понимаю, и мои навыки поисковика меня подводят.Браузер показывает «Нет состояния в списке», а не фактическое значение из базы данных и console.log.

Вот фрагменты из моего файла .Vue.

        <div>
          <span class="grey--text">State:</span>
          <span class="grey--text">{{ state }}</span>
        </div>



export default {
  components: { VoterRegistration },
  data() {
    return {
      state: "No State Listed"
    };
  },
  methods: {},
  created() {
    auth.onAuthStateChanged(user => {
      if (user) {
        db.collection("users")
          .doc(user.uid)
          .onSnapshot({ includeMetadataChanges: true }, function(doc) {
            console.log(doc.data()); // shows all the data I want
            this.state = doc.data().state;
            console.log(this.state); //this shows correct value in firestore db
          });

        this.loggedIn = true;
      } else {
        this.person = "User not logged in";
        this.loggedIn = false;
      }
    });
  }

Answer 1

Можете ли вы попробовать перейти к функции стрелки?

db.collection("users")
          .doc(user.uid)
          .onSnapshot({ includeMetadataChanges: true }, (doc) => {
            console.log(doc.data()); // shows all the data I want
            this.state = doc.data().state;
            console.log(this.state); //this shows correct value in firestore db
          });

Я думаю, this в вашем function(doc) не является экземпляром Vue.