Framework7 + Vue + Firebase : How do I get to open an individual page displaying the info from the database?

Hello dear, F7-Insiders!
How to I get to open a user with a dynamic url each to an individual page?
I use Framework7 + Vue for a Cordova Project.
I have customized the default product page that grabs an id and display data of a single product, It works by generating the unique ID (“uid” as per firebase) for each user in a url by it fails to pass it the user.vue page that I created, it doesn’t open when I click on it… What exactly could I be missing here…? I don’t know much about JSON.stringify stuffs!

Kindly check my code below:

  1. user.vue // the individual data page
    <f7-page name="user">
        <f7-navbar :title="user.username" back-link="Back"></f7-navbar>
        <f7-block-title>About {{user.username}}</f7-block-title>
        <f7-block strong>
            {{user.email}}
        </f7-block>
    </f7-page>
<script>
    export default {
        data: function () {
            var userId = this.$f7route.params.id;
            var currentUser;
            this.$f7.data.users.forEach(function (user) {
                if (user.user_id === userId) {
                    currentUser = user;
                }
            });
            return {
                user: currentUser,
            };
        }
    };
</script>
  1. home.vue // the user list loop, working just fine as expected

           <f7-list>
            <f7-list-item
                    v-for="(user) in users"
                    :key="user.user_id"
                    :title="user.username"
                    :link="`/user/${user.user_id}/`"
            ></f7-list-item>
          </f7-list>
    
  2. home.vue (mounted functions script):

    mounted() {

    let viewUsers = this;
    const usersRef = firebase.database().ref("users");
    usersRef.on("value", snapshot => {
      let data = snapshot.val();
      let users = [];
      Object.keys(data).forEach(key => {
        users.push({
          id: key,
          username: data[key].username,
          user_email: data[key].email,
          user_id: data[key].uid,
        });
      });
      viewUsers.users = users;
    });
    

    }

  3. home.vue (data returned script at the top):

data() {
return {
users: this.$f7.data.users, //the arrays had already been called/initialized at the app.vue
}

  1. routes.js:

    import UserPage from ‘…/pages/user.vue’;

    {
    path: ‘/user/:id/’,
    component: UserPage,
    },

WHAT EXACTLY AM I MISSING HERE GUYS???

Have you already tried to create an app using the CLI?

If so, there’s a similar example to you approach in there. Please review this and compare with your code: request-and-load.vue & routes.js

1 Like

Thanks, but that’s exactly what I did and wasn’t enough to get me going then, I had to go extra mile fixing it, altering the approach a little bit, so just in case somebody in the future may want to accomplish similar results, here is my simple code:

In the routes.js

 {
    path: '/user/:id/',
    component: UserPage,
  },

home.vue

    <div :class="user.username"> 

         <f7-list-item

                v-if="myUsername !== user.username"  {{excluding myself from the list}}

                :id="user.user_id"

                :title="user.username"

                :link="`/user/${user.user_id}/`"

         ></f7-list-item>

    </div>

mounted() {

let viewUsers = this;

const usersRef = firebase.database().ref("users");
usersRef.on("value", snapshot => {
  let data = snapshot.val();
  let users = [];


  Object.keys(data).forEach(key => {
    users.push({
      id: key,
      username: data[key].username,
      user_email: data[key].email,
      user_id: data[key].uid,
    });
  });
    viewUsers.users = users;
    this.myUsername = firebase.auth().currentUser.displayName; //used in the v-if ="" above
});

}

user.vue

<f7-page name="User" class="visitedUserProfile">
    <div v-if="id === user.id"  v-for="(user) in users" :key="user.user_id">
    <f7-navbar class="w3-small" back-link="Back">{{user.username}}</f7-navbar>
    <f7-block-title>About {{user.username}} </f7-block-title>
    <f7-block strong>
        <f7-list>
            <f7-list-item :title="user.username"></f7-list-item>
        </f7-list>
        <f7-list>
            <f7-list-item :title="user.career"></f7-list-item>
        </f7-list>
        <f7-list>
            <f7-list-item :title="user.gender"></f7-list-item>
        </f7-list>
    </f7-block>
    </div>
</f7-page>
import firebase from 'firebase';

export default {
    name: "User",
    data() {
        return {
            id: this.$f7route.params.id,
            users: [],
            myID: firebase.auth().currentUser.uid,
        }
    },
    created() {
        this.fetchData()
    },
    watch: {
        "$route": "fetchData"
    },
    methods: {
        fetchData() {

            let viewUsers = this;
            let id = this.$f7route.params.id;
            console.log(id);
            const usersRef = firebase.database().ref("users");
            usersRef.on("value", snapshot => {
                let data = snapshot.val();
                let users = [];
                Object.keys(data).forEach(key => {
                    users.push({
                        id: key,
                        username: data[key].username,
                        user_email: data[key].email,
                        user_id: data[key].uid,
                        gender: data[key].gender,
                        career: data[key].career,
                    });
                });
                viewUsers.users = users;
            });
        }
    },
}