Vue.js проблема маршрутизации профиля пользователя - PullRequest
Новая
       20

Vue.js проблема маршрутизации профиля пользователя

0 голосов
/ 15 ноября 2018

Я работаю над проектом, в котором есть список пользователей. Когда я нажимаю на пользователя, он должен указывать на его профиль пользователя. Я использую ASP.NET Core API, который работает и извлекает мои данные из базы данных SQL, протестированной с помощью Postman.

Когда я открываю dev взял в Chrome, я вижу, что когда я нажимаю на пользователя, страница перенаправляется на Profile.vue, и она попадает в мой API и получает информацию только для этого пользователя, что хорошо. Тем не менее, моя страница пуста. Я уверен, что моя маршрутизация настроена неправильно. В целях тестирования я просто пытаюсь получить firstName

Вот моя страница со списком пользователей. 

<v-data-table :headers="headers"
                :items="records"
                :search="search">
    <template slot="items" slot-scope="records">
      <td class="text-xl-left">{{ records.item.fullName }}</td>
      <td class="text-xs-left">{{ records.item.email }}</td>
      <td class="text-xs-left">{{ records.item.phone }}</td>
      <td class="text-xs-left">{{ records.item.city }}</td>
      <td class="justify-center layout px-0">
        <v-icon small
                class="mr-4"
                @click="editItem(records.item.lastName)">
                edit
        </v-icon>
      </td>
    </template>
    <v-alert slot="no-results" :value="true" color="error" icon="warning">
      Your search for "{{ search }}" found no results.
    </v-alert>
  </v-data-table>
</v-card>


<script>
import api from '../../store/api.js'

 export default {
data() {
  return {
    search: '',
    records: {},
    headers: [
      { text: 'Full Name', value: 'fullName' },
      { text: 'Email', value: 'email' },
      { text: 'Phone', value: 'phone' },
      { text: 'City', value: 'city' },
      { text: 'Actions', value: 'name', sortable: false }
    ]
  }
},
async created() {
  this.GetAllInquiries()
},
methods: {
  editItem(lastName) {
    this.$http.get(`http://localhost:61601/api/GetInquiry/${lastName}`)
    this.$router.push({ path: `./Profile/${lastName}` }) 
  },
  async GetAllInquiries() {
    this.loading = true

    try {
      this.records = await api.GetAllInquiries()
    } finally {
      this.loading = false
    }
  },

Когда я нажимаю на пользователя, у меня есть router.push, который переносит меня на мою страницу Profile.vue для этого конкретного пользователя: 

<template>
 <div>
   Student First Name: {{ records.item.FirstName }}<br/>
 </div>


 <script>
   import api from '../../store/api.js'

 export default {
data() {
  return {
    records: {
      firstName : this.firstName 
    },
  }
},
async created() {
  this.GetInquiriesByUser()
},
methods: {
  async GetInquiriesByUser() {
    this.loading = true

    try {
      this.records = await api.GetInquiriesByUser()
    } finally {
      this.loading = false
    }
  },

Здесь мой route.js (я думаю, здесь происходит ошибка) 

{
path: './Profile/',
name: 'Profile',
component: Profile
}

Вот скриншот инструмента dev из chrome. Это сразу после того, как я нажимаю на пользователя из списка, перенаправляет на http://localhost:61601/Inquiry/Profile/Duck,, как упоминалось ранее, когда я нажимаю на вкладку «Предварительный просмотр», я вижу все данные для «Утка»

dev tool

Надеюсь, все это имеет смысл, я пытался представить как можно больше подробностей, которые, как мне кажется, я переосмысливаю и усложняю. Любая помощь будет оценена.

...