无法读取未定义 Vue 的属性数组

Question

我正在尝试从 firebase 存储中获取 URL，我只是坚持将它们推送到我的数组，以便稍后可以使用 v-for 来显示图像。

我搜索过 SO，人们提到绑定是一种解决方案。为了让您了解，这是我的代码：

export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    // Points to the root reference
    var storageRef = firebase.storage().ref();

    // Points to 'images'
    var listRef = storageRef.child("uploads");

    // Find all the prefixes and items.
    listRef.listAll().then(function (res) {
        res.prefixes.forEach(function (folderRef) {
          console.log(folderRef);
        });
        res.items.forEach(function (itemRef) {
          const data = {
            id: storageRef.child(itemRef.fullPath).getDownloadURL(),
          };
           
        this.items = this.items.bind(this) //this is the line that I just added
          this.items.push(data); //this is the line that generates the error
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};

我的控制台返回TypeError: Cannot read property 'items' of undefined

我是 vue 新手，这里发布的大部分内容都是有角度的，它并不能真正帮助我弄清楚如何解决我的错误。我该怎么办？ 感谢您花时间阅读。

Answer 1

您的 items 数组范围在数据函数中，因此当您必须声明为全局时，您不能在其他函数中使用此 items 数组

Answer 2

绑定应该在forEach 回调函数上。 Function.prototype.bind()

forEach(callbackfn.bind(this))

或

在参数中发送这个：

forEach(callbackfn, this)

或者使用箭头函数而不是到处绑定

    listRef.listAll().then( (res)=> {
        res.prefixes.forEach( (folderRef)=> {
          console.log(folderRef);
        });
        res.items.forEach( (itemRef)=> {
          const data = {
            id: storageRef.child(itemRef.fullPath).getDownloadURL(),
          };
           
          this.items.push(data); //this is the line that generates the error
        });
      })
      .catch(function (error) {
        console.log(error);
      });