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:
- 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>
-
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>
-
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; });
}
-
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
}
-
routes.js:
import UserPage from ‘…/pages/user.vue’;
{
path: ‘/user/:id/’,
component: UserPage,
},
WHAT EXACTLY AM I MISSING HERE GUYS???