In my UserList.vue component, I have a list of users that I want to display on individual user profiles in the SingleUser.vue component. What is the easiest way to achieve this?
The user details are stored in the UserList.vue component. When a specific user link is clicked, I want to navigate to their profile.
Router paths: /user/1, /user/2, /user/3, etc.
UserList.vue:
<template>
<v-list two-line>
<template v-for="(user) in users">
<v-list-item
:key="user.username"
>
<router-link
:to="`user/${user.id}`"
>
<v-list-item-avatar>
<v-img :src="user.avatar"></v-img>
</v-list-item-avatar>
</router-link>
<v-list-item-content>
<router-link
:to="`user/${user.id}`"
>
<span class="name">
{{ user.name }}
</span>
<span class="username">
{{ user.usernaname }}
</span>
</router-link>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</template>
<script>
export default {
data: () => ({
users: [
{
id: 1,
username: 'johndoe',
name: 'John Doe',
avatar: require('@/assets/images/john-doe.png'),
},
{
id: 2,
username: 'bobdoe',
name: 'Bob Doe',
avatar: require('@/assets/images/bob-doe.png'),
},
{
id: 3,
username: 'annedoe',
name: 'Anne Doe',
avatar: require('@/assets/images/anne-doe.png'),
},
],
}),
}
</script>
SingleUser.vue (Single user profile):
<template>
<h1>{{ user.name }}</h1>
<h2>{{ user.username }}</h2>
<v-img :src="user.avatar"></v-img>
</template>
<script>
</script>
router.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/users',
name: 'Users',
component: () => import('../views/UserList.vue')
},
{
path: '/user/:id',
name: 'User',
component: () => import('../views/SingleUser.vue')
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router