Anyone with knowledge of Vue who can help me?

JavaScript
1

I have tried getting help on the official Vue forums, but I am sadly not getting any feedback, and people on Stack don’t seem to understand my question, so I am hoping that someone here might have some experience with Vue and is willing to help me with a problem.

I have created a Vue application where a person can sign up by entering various information, such as address, phone number etc. The data is sent to a Firestore Database called “users”. When that person is logged in, he or she is supposed to be able to access a “User info” page, where all that data is stored.

The problem is that the user info page is not fetching the data from the database. Instead I get the error that: Property or method “users” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

I have been stuck on this project for over a month now. Can anyone help me?
This is the code for the user info page:

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

name: 'Userinfo',

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>

And this is my router setup.

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
2

Preface: I do not know Vue. I am working on assumptions.

Well, you’ve called something a profile, and told the view to look at something called users, and it’s telling you it doesn’t know what you’re jabbering on about.

3

Like m_hutley says, you are referencing a users property in your template, yet that isn’t defined anywhere on your Vue instance.

Here:

<li v-for="(user, index) in users" :key="index">

To help us debug, what is the value of snapshot in the code you posted?

E.g.:

created() {
  let user = firebase.auth().currentUser 
  db.firestore().collection('users').where('user_id', '==', user.uid).get()
    .then(snapshot => {
      console.log(snapshot);
      ...
    });
  });
},
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.