javascript - 用另一种方法达到变量的内容

Question

我正在尝试matchData从 Vue 方法中获取内容。我能够console.log(this.matchData)，但无法获取其内容。

当我console.log(this.matchData[0].matchScores[0])按照方法时，readMatchPlayerScoreIds()我得到：

vue.runtime.esm.js?2b0e:619 [Vue 警告]：挂载钩子错误：“TypeError：无法读取未定义的属性‘matchScores’”

export default {
  data() {
    return {
      matchData: [],
    };
  },
  methods: {
    readMatches() {
      db.collection("matches")
        .get()
        .then((queryMatchSnapshot) => {
          queryMatchSnapshot.forEach((doc) => {
            this.matchData = [];
            this.matchData.push({
              awayscore: doc.data().awayscore,
              homeScore: doc.data().homeScore, 
              matchScores: doc.data().matchscores,
            })
          });
          console.log(this.matchData[0].matchScores[0])
        });
      },

      readMatchPlayerScoreIds() {
          console.log(this.matchData[0].matchScores[0])
      }
  },
  mounted() {
    this.readMatches();
    this.readMatchPlayerScoreIds();
  },
};

标签： javascriptvue.js

Answer 1

由于您是从 db异步获取数据，因此在 db 调用完成之前数据将为空。你应该在 Promise 解决后读取数据。（将我的评论重新表述为答案）。

一种方法是从以下位置返回 Promise readMatches：

    export default {
  data() {
    return {
      matchData: [],
    };
  },
  methods: {
    readMatches() {
      return db.collection("matches")
        .get()
        .then((queryMatchSnapshot) => {
          queryMatchSnapshot.forEach((doc) => {
            // this.matchData = []; // <= why would you reset it in each loop?
            this.matchData.push({
              awayscore: doc.data().awayscore,
              homeScore: doc.data().homeScore, 
              matchScores: doc.data().matchscores,
            })
          });
          console.log(this.matchData[0].matchScores[0])
        });
      },

      readMatchPlayerScoreIds() {
          console.log(this.matchData[0].matchScores[0])
      }
  },
  mounted() {
    this.readMatches()
        .then(() => this.readMatchPlayerScoreIds());
  },
};

但这取决于你想在readMatchPlayerScoreIds方法体中做什么。

另外，请注意不要matchData在forEach循环中重置。