„Undefinierter ‚blogItems‘-Fehler“ beim Versuch, Aktualisierungen an Vue-Datenvariablen zu übertragen

Question

Ich versuche, alle Beiträge von Firebase abzurufen und einem Array hinzuzufügen, erhalte jedoch die folgende Fehlermeldung:

Uncaught (in promise) TypeError: Cannot read property 'blogItems' of undefined

Hier ist das Skript:

export default {
    data(){
      return{
        blogItems: []
      }
    },
    mounted(){
      this.getPosts();
    },
    methods:{

      getPosts(){

        database.collection('blog').doc('yP6aYXvisFbTsqtQ3MEfuyz6xYE3').collection('posts').get().then(snapshot =>{

          const posts = snapshot.docs.map(doc => doc.data())
          posts.forEach(function(post){
            this.blogItems.push(post.content)
          })
        })
        
      },

    }

  }

Answer 1

在你的情况下，将this.blogItems中的this更改为posts。

你有两种解决方法

1. 将this存储到一个变量中并使用它

   getPosts(){
     let tis = this;
   
    database.collection('blog').doc('yP6aYXvisFbTsqtQ3MEfuyz6xYE3').collection('posts').get().then(snapshot =>{
   
      const posts = snapshot.docs.map(doc => doc.data())
      posts.forEach(function(post){
        tis.blogItems.push(post.content)
      })
    })
   
    },

---

2. 使用箭头函数

   getPosts(){
   
    database.collection('blog').doc('yP6aYXvisFbTsqtQ3MEfuyz6xYE3').collection('posts').get().then(snapshot =>{
   
      const posts = snapshot.docs.map(doc => doc.data())
      posts.forEach((post) => {
        this.blogItems.push(post.content)
      })
    })
   
    },