如何解决Nuxt this.$route 未定义
我有一个名为 products/_id 的动态路由,它应该从 Firestore 加载一个产品。我正在使用 vuefire 从 Firebase 数据库中获取产品。获取整个产品集合的效果非常好。
firestore: {
product: firebase
.firestore()
.collection("products")
}
但是获取具有特定 id 的文档是麻烦的开始。通常我会打电话
firestore: {
product: firebase
.firestore()
.collection("products")
.doc(this.$route.params.id),}
但现在我收到一条错误消息“TypeError:无法读取未定义的属性‘$route’”。这很奇怪,因为如果我将路由记录到控制台,我实际上可以看到 ID。此外,调用 ".doc("DOCUMENT_ID") 工作得很好。
有人知道如何解决这个问题吗?我尝试了多种方法和挂载钩子的组合来检索 ID,但无济于事。
mounted() {
this.getProduct();
},methods: {
getProductId() {
return this.$route.params.id;
},},firestore: {
products: firebase.firestore().collection("products").doc(this.getProductId),}
出现同样的错误...
解决方法
firestore
在这里被指定为一个对象,因此它会立即在组件的上下文之外进行评估,因此 this
不会是 Vue 组件实例。
要解决此问题,请将 firestore
指定为返回预期对象的函数,如 the docs 所示:
export default {
firestore() {
// ✅ `this` is Vue component instance inside function
return {
products: firebase.firestore().collection("products").doc(this.getProductId),}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。