Как нажать на пользователя и показать сведения о пользователе в другом компоненте / представлении с помощью маршрутизатора Vuejs? - PullRequest
Новая
       20

Как нажать на пользователя и показать сведения о пользователе в другом компоненте / представлении с помощью маршрутизатора Vuejs?

0 голосов
/ 18 апреля 2019

Я делаю проект с 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>

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

enter image description here enter image description here

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

1 Ответ

2 голосов
/ 18 апреля 2019

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

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

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))
}
...