主页 / 问题 / 1091489
Accepted
Evgenii Kantemirov
Asked:2020-03-06 19:09:09 +0000 UTC2020-03-06 19:09:09 +0000 UTC

Vue.js 如何创建一个页面来显示个人用户的数据

  • 772

有一个 vue.js 组件可以从 json 数组生成用户图标，

用户.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>

任务如下。我们按下图标，进入用户页面，为特定用户加载数据。

用户卡.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);
      })
    },
  }
});

问题是如何去做。

vue.js

2 个回答

  1. <template>
  <div class="users">
    <UserCard v-for="(user, index) in  users"  
    :user="user" :key="index" class="user" 
    @click="handleClick(index)" />
  </div>
</template>

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

    感谢您的回答，但起初我不太明白该怎么做。现在发现必须使用动态路由。在路由文件中添加：

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

    动态段包含 id 参数。让我们为路由 Id 命名，以便以后可以使用 router-link 组件轻松访问它。现在，让我们创建 User.vue 组件，任务是在该组件中显示有关用户的信息。在用户模板中，我们将可以访问 $route.params.id 值。这是传递给 URL 的 id 参数。为了确保标识符被正确传递，我们将它显示在组件的顶部。

    用户.vue

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

    在组件中

    用户卡

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

    使用 tag 输入参数创建一个 router-link 元素。使用此参数，路由器链接将转换为给定标签。输入参数to表示链接的目标路由，可以描述为一个对象。params 语法用于传递参数：{ id:user. id} 所以 user.id 的值将作为 id 传递给动态段。例如，如果 user.id 是 1005，则路由将是 /user/1005。

    • 0

相关问题