Блог

Я делаю проект с помощью Vuejs, и мне нужно следующее:

• Используйте API и извлеките список пользователей (только имена пользователей) на домашней странице.
• Создайте пользовательский фильтр поиска для поиска пользователей по имени.
• При нажатии на имя пользователя мне нужно перенаправить на другой компонент и вывести данные этого пользователя в этом компоненте (только данные пользователя, на которого я нажал).).

Я выполнил первые две задачи. Однако я понятия не имею, как выполнить другую третью задачу. Я читал документацию для vue-router, но я не могу в этом разобраться.

Я использовал axios для получения списка пользователей и jsonplaceholder.

Компонент списка пользователей:

 <template>
  <div>
    <!-- List Rendering the response data stored in posts[] array -->
    <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
import axios from 'axios'

export default {
  name: 'UsersList',
  data() {
    return {
      users: [],
      searchUsers: ''
    }
  },
  computed: {
    // custom search box for user names
    filteredUsers() {
      return this.users.filter(user => {
        return user.name.match(this.searchUsers)
      })
    }
  },
  // life cycle hook - calls axios
  created(){
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
      console.log(response.data)
      this.users = response.data
      // console.log an error if get() method is unsuccessful
    }).catch(err => {
      console.log(err)
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

.users {
  cursor: pointer;
  display: inline-block;
}
</style>
 

Имя компонента списка пользователей UserList.vue

Мне нужно вывести сведения о пользователе в этом компоненте, который называется UsersDetails.vue

 <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>
 

Скриншот список пользователей и пользовательский фильтр поиска

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

Вы можете использовать динамическое сопоставление маршрутов

Добавить маршрут

 const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})
 

Динамический сегмент обозначается двоеточием : При сопоставлении маршрута, значение динамических сегментов будет отображаться как this.$route.params в каждом компоненте.

При Single User component выполнении AJAX вызова в смонтированном

 mounted() {
    axios.get("https://jsonplaceholder.typicode.com/users/"   this.$route.params)
    .then(res => console.log(res))
}