开发者问题收集

错误:属性或方法“用户”未在实例上定义,但在渲染期间被引用

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