Javascript firestore onSnapshot更新VueJS中的值，但不更新DOM

我正在使用onSnapshot收听Vue中的实时更新。我可以看到数据正在从onSnapshot加载，但它没有在DOM中更新。这可能真的是一个愚蠢的错误，我只做了一个多月的编程，我只是不懂一些东西，我的谷歌搜索技能让我失望。浏览器不显示列出的状态，也不显示DB和console.log中的实际值

以下是my.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;
      }
    });
  }

---

你能试着换成箭头功能吗

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
          });

---

我认为functiondoc中的这个不是Vue实例。

您能尝试更改为arrow函数吗

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
          });

---

我认为functiondoc中的这个不是Vue实例。

HA就是这样做的！你是个天才。非常感谢你。我没有意识到它是这样工作的。我还学到了很多！我会在9分钟内把这个标记为已回答，直到那时我才知道。哈，是这样的！你是个天才。非常感谢你。我没有意识到它是这样工作的。我还学到了很多！我会在9分钟内把这个标记为已回答，直到那时我才能回答。