Question

我正在使用onSnapshot监听Vue中的实时更新。我可以看到数据是从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实例。

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

1 个答案: