VueJS & Firestore - Uncaught (в обещании) TypeError: Невозможно прочитать свойство undefined

Question

Я создаю простой макет приложения в VueJS, используя Google Cloud Firestore в качестве бэкэнда.

У меня есть готовый шаблон, и приложение успешно общается с 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"]

Мой следующий шаг - перенести данные в «mydata» и добавить их к объекту «options», и я столкнулся с проблемой.

Я пытался следовать шаблону этого урока https://www.youtube.com/watch?v=rUz4oz7dTno&t=491s и вставил следующую строку кода под 'console.log (mydata)'

this.options.push(mydata)

Однако я получаю следующую ошибку:

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

Я не понимаю, почему он не может прочитать свойство 'options'? Любая помощь будет высоко ценится.

Answer 1

Я полагаю, это из-за масштаба. «This» выходит за рамки функции, поэтому не находит свойства. Попробуйте так. Внутри вашего create () в качестве первой строки сделайте копию «this», как показано ниже.
Var self = this;

И затем, вместо этого .options, сделайте self.options