Currently working on a Vuejs project that requires the following tasks:
Utilize an API to fetch and display a list of users (only user names) on the home page.
Create a custom search filter to find users based on their names.
Implement functionality where clicking on a user's name redirects to another component, displaying that specific user's details.
The first two tasks have been successfully completed. However, I am stuck on the third task. Despite referring to vue-router documentation, I am unable to resolve it.
I used axios in conjunction with jsonplaceholder to fetch the list of users.
User List Component:
<template>
<div>
<b-input id="inline-form-input-name" class="my-3 col-10 col-sm-10 col-md-4 col-lg-4" type="text" v-model="searchUsers" placeholder="Search Users..."
></b-input>
<h2>Our users:</h2>
<div v-for="user in filteredUsers" :key="user.id">
<p v-b-tooltip.hover.right='"Click on user to know more"' class="users pr-2"><span>{{ user.id }}</span> - {{ user.name }}</p>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'UsersList',
data() {
return {
users: [],
searchUsers: ''
}
},
computed: {
filteredUsers() {
return this.users.filter(user => {
return user.name.match(this.searchUsers)
})
}
},
created(){
axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
console.log(response.data)
this.users = response.data
}).catch(err => {
console.log(err)
})
},
}
</script>
<style scoped lang="scss">
.users {
cursor: pointer;
display: inline-block;
}
</style>
The User list component is named UserList.vue
The user detail output will be displayed in the UsersDetails.vue component
<template>
<div class="user-details-wrapper">
<h1>I am the user details component</h1>
</div>
</template>
<script>
export default {
name: 'UserDetails',
data(){
return {
}
},
}
</script>
<style lang="scss">
.user-details-wrapper {
h1 {
background: #000;
color: #fff;
padding: 10px;
margin-top: 30px;
display: inline-block;
}
}
</style>
Screenshot of user list & custom search filter
https://i.sstatic.net/keyh9.png https://i.sstatic.net/ZzpuR.png
Your assistance on this matter would be greatly appreciated!