Question

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

我已启动并运行模板，并让应用成功与Firestore通话。

以下是我的一个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>

到目前为止一切顺利。控制台根据需要记录一系列指标：

(3) ["Return On Equity", "Net Margin", "EPS"]

我的下一步是将数据传输到＆＃39; mydata＆＃39;并将其附加到＆＃39;选项＆＃39;对象，这就是我遇到麻烦的地方。

我已尝试按照本教程https://www.youtube.com/watch?v=rUz4oz7dTno&t=491s的模式进行操作，并在＆＃39; console.log（mydata）＆＃39;

下插入了以下代码行

this.options.push(mydata)

但是我收到以下错误：

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

我不明白为什么它无法阅读＆＃39;选项＆＃39;属性？任何帮助将不胜感激。

Answer 1

我认为这是因为范围。 “这个”超出了函数的范围，因此它没有找到属性。试试这种方式。在你的create（）中，作为第一行，如下所示制作“this”的副本 Var self = this;

然后，而不是this.options，做self.options

Answer 2

您可以通过箭头函数将'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")
  }
})

此代码将起作用。

VueJS＆amp; Firestore - 未捕获（在promise中）TypeError：无法读取undefined的属性

2 个答案: