Как проверить конкретный компонент сведений о пользователе, используя идентификатор пользователя с помощью vue-router из файла json?

Question

У меня есть компонент Home.vue, который выводит список пользователей из user.json file. Я создал маршрутизатор, чтобы связать каждого пользователя с userProfile.vue компонентом, где мы увидим детали пользователя в зависимости от идентификатора пользователя.

Я попытался с кодом ниже, но userProfile.vue выводит всех пользователей, и я просто хочу вывести идентификатор пользователя, который соответствует маршрутизатору. Я знаю, что маршрутизатор работает, потому что я получил правильный идентификатор на вкладке ссылки.

Это мой 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 по этой ссылке

Любая помощь будет по достоинству оценена!

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>