Firebase toDate在Vue组件上出现未定义错误

我正在尝试使用

toDate（）

函数将时间戳转换为可读的日期，使用

toDate（）

from

firestore

和

moment.js

转换为所需的日期格式

在我使用

toDate

函数并出现错误之前，一切看起来都很好[

Vue warn]：呈现错误：“TypeError:member.dateAdded未定义”

我不明白为什么会发生错误，因为我在Vue组件的其他部分使用转换日期，而我没有收到此错误

这是我得到错误的组件。正如您所看到的，我在表前使用

toDate

，没有问题，但是表中的那一个给了我错误。当我不使用这个函数时，我得到了这个

时间戳（秒=1577548891，纳秒=834000000）

玩家补充道！
接近
成员名单
给定的最后一点@{{log.time.toDate（）| formatDate}

名称
补充
{{member.name}
{{member.dateAdded.toDate（）| formatDate}}

从“./data/firebaseInit”导入{db，fv，tstp}”；
从“firebase/app”导入firebase；
从“./组件/弹出窗口”导入弹出窗口；
从“时刻”中导入时刻；
导出默认值{
组件：{Popup}，
数据（）{
返回{
伊萨明：错，
伊斯梅尔：错，
snackbar:false，
成员：[]，
日志：[]，
用户：空
};
},
过滤器：{
formatDate:函数（值）{
如果（值）{
返回时刻（值）。格式（“DD/MMM/YYYY HH:mm”）；
}
}
},
创建（）{
this.fetchDb（）；
},
方法：{
fetchDb（）{
db.集合（“成员”）
.orderBy（“名称”）
.onSnapshot（快照=>{
常量成员=[]；
snap.forEach（doc=>{
让newPlayer=doc.data（）；
newPlayer.id=doc.id；
成员。推（新玩家）；
});
这个.成员=成员；
this.user=firebase.auth（）.currentUser.displayName；
});
数据库集合（“点日志”）
.orderBy（“时间”、“描述”）
.限额（1）
.onSnapshot（快照=>{
常量日志=[]；
snap.forEach（doc=>{
设newLog=doc.data（）；
newLog.id=doc.id；
logs.push（newLog）；
});
this.logs=日志；
});
}
}
}
};

这是向firestore添加时间戳的组件

mdi加号圆
添加玩家
添加玩家
从“./data/firebaseInit”导入{db，tstp}”；
从“firebase/app”导入firebase；
导出默认值{
数据（）{
返回{
名称：空，
};
},
提交：{
姓名：“，
对话框：“”，
},
方法：{
onSubmit（）{
db.集合（“成员”）
.添加({
姓名：this.name，
添加日期：tstp.fromDate（新日期（）），
})
.然后（（）=>{
this.dialog=false；
此。$emit（“playeraded”）；
})
.catch（err=>console.log（err））；
}
}
};

---

谁能给我解释一下这件事吗

这很可能是因为，对于

成员

数组的某些元素，没有

dateAdded

值

如果看不到您的数据，很难知道确切原因是什么，但最可能的原因之一是

成员

集合中的文档没有

添加日期

字段

处理此问题的一种可能方法是执行以下操作：

<td v-if="member.dateAdded">{{member.dateAdded.toDate() | formatDate}}</td>
<td v-else>-</td>

fetchDb() {
  db.collection("pointLog")
    .orderBy("time", "desc")
    .limit(1)
    .get()
    .then(snap => {
      const logs = [];
      snap.forEach(doc => {
        let newLog = doc.data();
        newLog.id = doc.id;
        logs.push(newLog);
      });
      this.logs = logs;

      return db
        .collection("members")
        .orderBy("name")
        .get();
    })
    .then(snap => {
      const members = [];
      snap.forEach(doc => {
        let newPlayer = doc.data();
        newPlayer.id = doc.id;
        members.push(newPlayer);
      });
      this.members = members;
      this.user = firebase.auth().currentUser.displayName;
    });
}

---

这很可能是因为，对于

成员

数组的某些元素，没有

dateAdded

值

如果看不到您的数据，很难知道确切原因是什么，但最可能的原因之一是

成员

集合中的文档没有

添加日期

字段

处理此问题的一种可能方法是执行以下操作：

<td v-if="member.dateAdded">{{member.dateAdded.toDate() | formatDate}}</td>
<td v-else>-</td>

fetchDb() {
  db.collection("pointLog")
    .orderBy("time", "desc")
    .limit(1)
    .get()
    .then(snap => {
      const logs = [];
      snap.forEach(doc => {
        let newLog = doc.data();
        newLog.id = doc.id;
        logs.push(newLog);
      });
      this.logs = logs;

      return db
        .collection("members")
        .orderBy("name")
        .get();
    })
    .then(snap => {
      const members = [];
      snap.forEach(doc => {
        let newPlayer = doc.data();
        newPlayer.id = doc.id;
        members.push(newPlayer);
      });
      this.members = members;
      this.user = firebase.auth().currentUser.displayName;
    });
}

---

错误是某些文档上缺少DateAdd，因为这是一个添加。v-if解决了这个问题。在回答的第二部分，我需要onsnapshot（）而不是get（），因为我需要用更改来更新成员数组，为了帮助理解错误，我从vue组件中删除了一些代码。错误是某些文档上缺少dateAdded，因为这是一个添加。v-if解决了这个问题。在回答的第二部分，我需要onsnapshot（）而不是get（），因为我需要用更改来更新成员数组，为了帮助理解错误，我从vue组件中删除了一些代码。