javascript - 如何使用来自 json 文件的 vue-router 的用户 ID 检查特定的用户详细信息组件？

Question

我有一个 Home.vue 组件，它从 user.json 文件 输出用户列表。我创建了一个路由器，将每个用户链接到 userProfile.vue 组件，我们将在其中根据用户 ID 查看用户详细信息。

我尝试使用下面的代码，但是 userProfile.vue 输出所有用户，我只想输出与路由器对应的用户 ID。我知道路由器可以正常工作，因为我在链接选项卡中获得了正确的 ID。

这是我的 user.json 文件:

[
    {
        "id": "1",
        "jobTitle": "Lead Web Developer",
        "fullName": "John Doe",
        "email": "john_doe@hotmail.com",
        "phoneNumber": "514-149-4934",
        "address": "4230, Amber Street."
    },
    {
        "id": "2",
        "jobTitle": "FrontEnd Web Developer",
        "fullName": "Jane Doe",
        "email": "jane_doe@gmail.com",
        "phoneNumber": "514-365-9524",
        "address": "5609, Diamond Street."
    },
    {
        "id": "3",
        "jobTitle": "BackEnd Developer",
        "fullName": "Michael Summerland",
        "email": "michael_summerland@gmail.com",
        "phoneNumber": "514-892-2436",
        "address": "5609, Ruby Street"
    },
    {
        "id": "4",
        "jobTitle": "UX Designer",
        "fullName": "Johnny UnderWood",
        "email": "johnny_underwood@gmail.com",
        "phoneNumber": "514-422-3059",
        "address": "5609, Esmerald Street"
    }
]

这是我的router.js 文件

import Vue from 'vue'
import Router from 'vue-router'
// imports components to router
import Home from '@/components/Home.vue'
// imports userProfile component
import UserProfile from '@/components/UserProfile.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // route to user profile matching id 
    {
      path: '/user/:id',
      name: 'UserProfile',
      component: UserProfile
    }
  ]
})

这是我的 UserProfile.vue 组件

<template>
    <div class="user-profile">
        <b-navbar toggleable="lg" type="dark" variant="info">
            <div class="container">
                <b-navbar-brand class="text-uppercase mr-auto">User Profile</b-navbar-brand>
                <!-- Route link to go back to user list -->
                <router-link :to="{ path: '/'}"><b-button variant="success">Go back</b-button></router-link>
            </div>
        </b-navbar>

        <!-- User details -->
        <div class="user-details container mt-4">
            <div v-for="(user, id) in users" :key="id">
                <div class="user-title"><strong>User Title: </strong>{{ user.jobTitle }}</div>
                <p class=""><strong>Street:</strong>  {{ user.fullName }}</p>
                <p class=""><strong>Zip Code:</strong>  {{ user.email }}</p>
                <p class=""><strong>City:</strong>  {{ user.phoneNumber }}</p>
                <p class=""><strong>State:</strong> {{ user.address }}</p>
            </div>
        </div>
    </div>
</template>

<script>
// imports user.json file
import users from './../assets/users.json'

export default {
    name: 'UserProfile',
    data(){
        return {
           users: users,
        }
    },
}
</script>
<style scoped lang="scss">

</style>

你也可以查看我的GitHub branch .

Answer 1

您已更新如下代码:

    <!-- User details -->
        <div class="user-details container mt-4">
        <div v-for="(user, id) in users" :key="id">


             <div class="user-title"><strong>User Title: </strong>{{ user.jobTitle                                    }}</div>
            <p class=""><strong>Street:</strong>  {{ user.fullName }}</p>
            <p class=""><strong>Zip Code:</strong>  {{ user.email }}</p>
            <p class=""><strong>City:</strong>  {{ user.phoneNumber }}</p>
            <p class=""><strong>State:</strong> {{ user.address }}</p>
       <router-link :to="{ name: 'UserProfile', params: { id: user.id }}">User</router-link>
        </div>

    </div>