Question

我正在创建一个具有用户列表的应用程序，当我单击单个用户时，它将带我到该特定用户配置文件（Profile.vue）。我将ASP.NET Core API与Vue.js用作前端。我的API正常运行，因此当我单击用户时，可以使用Chrome dev Tools和Postman查看来自数据库的数据。当我在Chrome中打开Vue Dev Tools时，我看到数据是“未定义的”。例如，我只是试图让用户的firstName显示，这样我就知道它可以正常工作。

这是我将页面从用户列表路由到特定用户个人资料的方式

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

一旦我被路由，这是我的个人资料。Vue将显示用户信息

<template>
  <div>
        <h2>Student Info</h2>
        Student Name: {{ records.firstName }}
        <br />

  </div>
</template>

<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
      },
      post: function () {
        this.$http.get('http://localhost:61601/api/inquiry', {
          firstName: this.firstName
        })
      }
    }
  }
</script>

API.js

import Vue from 'vue'
import axios from 'axios'

const client = axios.create({
  baseURL: 'http://localhost:61601/api/',
  json: true
})

export default {
  async execute(method, resource, data) {
    return client({
      method,
      url: resource,
      data,
    }).then(req => {
      return req.data
    })
  },
  GetAllInquiries() {
    return this.execute('get', '/Inquiry')
  },
  GetInquiriesByUser() {
    return this.execute('get', '/GetInquiry/')
  },
  create(data) {
    return this.execute('post', '/', data)
  },
  update(id, data) {
    return this.execute('put', `/${id}`, data)
  },
  delete(id) {
    return this.execute('delete', `/${id}`)
  }
}

GetInquiryByUser控制器

 [Route("api/[controller]")]
    public class GetInquiryController : BaseController
    {
        private GetInquiryByUser manager;
        public GetInquiryController(IConfiguration config) : base(config)
        {
            manager = new GetInquiryByUser(config);
        }

        [HttpGet("{lastName}")] //api/GetInquiry/yourlastname
        public IEnumerable<InquiryModel> Get([FromRoute]string lastName)
        {
            return manager.GetInquiriesByUser(lastName);
        }
    }

查询控制台获取所有用户的列表，我的GetInquiryByUser传递了lastName以获取该特定用户的配置文件。（最终，我将通过一个唯一的ID，仅进行测试）我也在使用Vue路由的哈希模式。起初，我对使用的是哪种模式感到困惑，并且将历史记录和哈希值结合在一起使用，但是我认为我现在都是哈希模式。如果有人可以指出正确的方向，那就太好了！如果需要更多详细信息，请告诉我。

VUE.js记录未定义

0 个答案: