Javascript VueJS&；Firestore-未捕获（承诺中）TypeError:无法读取未定义的属性

我正在VueJS中创建一个简单的应用程序模型，使用Google Cloud Firestore作为后端

我已经启动并运行了一个模板，并且应用程序成功地与Firestore对话

下面是my Vue组件之一的工作组件，它从Firestore获取一些数据并将日志记录到控制台：

<script>
import db from './firebaseInit'
export default {
  name: 'MainScr',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      options: [],
    }
  },
  created () {
    var docref = db.collection('UI_Elements').doc('Metric_Dropdown')    

    docref.get().then(function(doc) {
      if (doc.exists) {
        const mydata = doc.data().Metrics 
        console.log(mydata)
      } else {
        console.log("No such document")
      }
    })
  }
}
</script>

我的下一步是传输“mydata”中的数据并将其附加到“options”对象，这就是我遇到麻烦的地方

我尝试了遵循本教程的模式，并在“console.log（mydata）”下面插入了以下代码行

但是，我得到以下错误：

Uncaught (in promise) TypeError: Cannot read property 'options' of undefined
    at eval (MainScr.vue?d2a3:33)

---

我不明白为什么它不能读取“选项”属性？任何帮助都将不胜感激。

我相信这是因为范围太广。“this”超出了函数的范围，因此它没有找到属性。 这样试试。 在create（）中，作为第一行，复制如下所示的“this”。
Var self=这个

---

然后，用self.options代替this.options，我相信这是因为范围。“this”超出了函数的范围，因此它没有找到属性。 这样试试。 在create（）中，作为第一行，复制如下所示的“this”。
Var self=这个

---

然后，不要使用this.options，而是使用self.options。您可以通过箭头函数将“this”的范围设置为其vue组件

ocref.get().then((doc) => {
  if (doc.exists) {
    const mydata = doc.data().Metrics
    console.log(mydata)
    this.options.push(mydata)
  } else {
    console.log("No such document")
  }
})

---

此代码将正常工作。

您可以通过箭头函数将“This”的作用域设置为其vue组件

ocref.get().then((doc) => {
  if (doc.exists) {
    const mydata = doc.data().Metrics
    console.log(mydata)
    this.options.push(mydata)
  } else {
    console.log("No such document")
  }
})

---

此代码将起作用。

选项

有一个由
数据
方法返回的对象属性-它不是实例化对象本身的属性，因此您无法通过
此选项访问它，我想。
options
有一个由
data
方法返回的对象的属性-它不是实例化对象本身的属性，所以你不能通过
这个。options
，我想。我很高兴它有帮助：）我很高兴它有帮助：）
ocref.get().then((doc) => {
  if (doc.exists) {
    const mydata = doc.data().Metrics
    console.log(mydata)
    this.options.push(mydata)
  } else {
    console.log("No such document")
  }
})