Error: Property or method "users" is not defined on the instance but referenced during render

Question

I am having issues displaying the data that I stored inside my Firebase database collection. Originally I was getting the error "Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined" I was able to fix this problem by providing the correct path in the router configuration file, but now I am getting the error: Property or method "users" is not defined on the instance but referenced during render

The code

    <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>

Here is my router configuration as requested by another user.

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

Answer 1

After having corrected the problem with the router configuration, you now have the following error:

Property or method "users" is not defined on the instance but referenced during render

This is because, in the template you refer to users but this property is not declared in the data object in the script.

You should do as follows:

export default {
 data(){
     return{
        users: []
     }
 },
 created(){
    let user = firebase.auth().currentUser 
    db.firestore().collection('users').where('user_id', '==', user.uid).get()
    .then(snapshot => {
        let usersArray = [];
        snapshot.forEach((doc) => {
             usersArray.push(doc.data());
        })
        this.users = usersArray;
      });
 }

---

Now, to be complete, it seems that in this page you just want to display the profile of one user. So you should probably not use <li v-for="(user, index) in users" :key="index"> which is used when you loop over several items (i.e. users here). But this should probably be the subject of another question.