错误:属性或方法“用户”未在实例上定义,但在渲染期间被引用
2020-05-11
1576
我在显示存储在 Firebase 数据库集合中的数据时遇到问题。 最初我收到错误 “Function CollectionReference.doc() 要求其第一个参数为非空字符串类型,但其类型为:未定义” 我能够通过在路由器配置文件中提供正确的路径来修复此问题,但现在我收到错误: 属性或方法“users”未在实例上定义,但在渲染期间被引用
代码
<template>
<div class="profile container">
<h2 class="deep-purple-text center">Your information</h2>
<div class="card-content">
<ul class="info">
<li v-for="(user, index) in users" :key="index">
<p>{{ profile.name }}</p>
</li>
<li v-for="(user, index) in users" :key="index">
<p>{{ profile.address }}</p>
</li>
<li v-for="(user, index) in users" :key="index">
<p>{{ profile.zip }}</p>
</li>
<li v-for="(user, index) in users" :key="index">
<p>{{ profile.phone }}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
import db from '@/firebase/init'
import firebase from 'firebase'
export default {
data(){
return{
profile: null,
}
},
created(){
let user = firebase.auth().currentUser
db.firestore().collection('users').where('user_id', '==', user.uid).get()
.then(snapshot => {
snapshot.forEach((doc) => {
this.profile = doc.data()
})
})
}
}
</script>
这是另一位用户要求的我的路由器配置。
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import AddProduct from '@/components/AddProduct'
import EditProduct from '@/components/EditProduct'
import Signup from '@/components/Signup'
import Login from '@/components/Login'
import Userinfo from '@/components/Userinfo'
import firebase from 'firebase'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index,
},
{
path: '/add-product',
name: 'AddProduct',
component: AddProduct,
},
{
path: '/edit-product/:product_slug',
name: 'EditProduct',
component: EditProduct,
},
{
path: '/signup',
name: 'Signup',
component: Signup
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/profile',
name: 'Userinfo',
component: Userinfo,
}
]
})
router.beforeEach((to, from, next) => {
if(to.matched.some(rec => rec.meta.requiresAuth)) {
let user = firebase.auth().currentUser
if(user){
next()
} else{
next({ name: 'Login' })
}
} else{
next()
}
})
export default router
1个回答
通过路由器配置纠正问题后,您现在有以下错误:
353752953
这是因为,在模板中,您参考
users < /code>,但是此属性在
data
对象中未声明。
您应该按以下方式执行:
437684550
<
HR/>
现在,要完成,似乎在此页面中,您只想显示一个用户的配置文件。因此,您可能不应使用
&lt; li v-for =“(用户,索引)在用户中”:key =“ index”&gt;
,当您循环循环几个项目时使用(即
用户
在这里)。但这可能应该是另一个问题的主题。
Renaud Tarnec
2020-05-11