Vue.js Как создать страницу для вывода данных об отдельных пользователях

Question

Есть vue.js компонент генерирующий иконки пользователей из json массива,

users.vue

    <template>
      <div class="users">
        <GameCard v-for="(user, index) in  users"  
        :user="user" :key="index" class="user" />
      </div>
    </template>
<script>
import UserCard from "../components/UserCard";
import Vuex from 'vuex';
import { mapState} from 'vuex'; 
import firebase from 'firebase';

export default {
  name: "All",
  components: {   
    UserCard,    
  },
  computed:{
  ...mapState([            
       'users'        
    ]),   
  },
  created: function() {    
    this.$store.dispatch('initUsers')    
  }, 
  };
</script>

Задача состоит в следующем. Нажимаем иконку, попадаем на страницу пользователя, подгружаем данные данные по конкретному пользователю.

usercard.vue

<template>`
<div class="user-card">
  <div class="user-card__preview">
    <img  :src='user.logo' class="user-card__image" />       
    <div class="game-card__title">{{user.name}}</div>      
    <div class="game-card__text">{{user.description}}</div>         
  </div>
</div>
</template>
<script>
import Vuex from 'vuex'
export default {
name: "UserCard",
props: {
  user: Object,           
},  
};
</script>

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import firebase from 'firebase';
Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    users: [], 
  },
  getters: {    
    gamesFilterToVisible: state => {
        return  state.users.filter(userss => users.settings.visible);
    },   
  },  
  mutations: {
    SET_USER: (state, users) => {
      state.users = users;
    },
  },
  actions: {
    initUsers: ({commit}) => {
      firebase.firestore().collection('users')
      .get()
      .then(querySnapshot => {
        let data = querySnapshot.docs.map(doc => doc.data())
        commit('SET_USERS', data);
      })
    },
  }
});

Вопрос как это сделать.

Answer 1

<template>
  <div class="games">
    <GameCard v-for="(game, index) in  games"  
    :game="game" :key="index" class="games__item" 
    @click="handleClick(index)" />
  </div>
</template>

<script>
  export default {
  data: function() {
    return {
      selectedItem: null
    };
  },
  methods: {
    handleEditClick(index) {
      this.selectedItem = index;
    }
  }
</script>

Answer 2

Спасибо за ответ, но сначала не совсем ясно понимал, что делать. Теперь выяснил, что надо использовать динамическую маршрутизацию. В файле маршрутов добавляем:

{
   path: "/user/ :id",
   name: "User",
   component: User,
   props: true,    
}

Динамический сегмент содержит параметр id. Назовем маршрут Id, чтобы позже к нему было легче обращаться с помощью компонента router-link. А теперь, создадим компонент User.vue Задача - отобразить информацию о пользователе внутри данного компонента. В шаблоне User у нас будет доступ к значению $route.params.id. Это параметр id, переданный в URL-aдpece. Чтобы убедиться в корректности передачи идентификатора, выведем его в верхней части компонента.

User.vue

<h2 class="user-card__id">{{ $route.params.id}}</h2>

в компоненте

UserCard

<router-link tag="div"  :to="{ name : 'User', params: {id: user.id}}" >{{user.name}}</router-link>

Создаем элемент router-link с входным параметром tag. С помощью этого параметра router-link преобразуется в заданный тег. Входной параметр to обозначает целевой маршрут ссылки, который можно описать в виде объекта. Для передачи параметров используется синтаксис params: { id:user. id}, таким образом, значение user.id будет передано в динамический сегмент под именем id. Например, если user.id равно 1005, маршрут будет выглядеть как /user/1005.

БЛОГ НА HUSL

Vue.js Как создать страницу для вывода данных об отдельных пользователях

Ответы (2 шт):