1

如何打开一个用户，每个用户都有一个动态 url 到一个单独的页面？我将 Framework7 + Vue 用于 Cordova 项目。我已经自定义了默认产品页面，该页面获取单个产品的 id 并显示数据，它通过为 url 中的每个用户生成唯一 ID（根据 firebase 的“uid”）来工作，但无法将其传递给 user.vue我创建的页面，当我单击它时它不会打开。我究竟会在这里错过什么？我不太了解 JSON.stringify 的东西！

user.vue - 个人数据页面

<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 - 用户列表循环，按预期工作

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

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() {
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,
}

我到底在这里想念什么？

4

0 回答 0