javascript - 在 Vue.js 中传递参数

Question

我试图在我的 Vue.js 项目中传递参数，但没有运气。目标是当我从列表中选择一个用户时，它应该路由到该特定用户的配置文件作为 localhost:61601/Profile/"lastName"

这是我点击用户名旁边的方法:

 editItem(lastName) {
    this.$router.push({ name: 'GetInquiry', params: { lastName: lastName } })
    this.$http.get('http://localhost:61601/api/' + 'GetInquiry/' + { lastName : lastName })
  },
  async GetAllInquiries() {
    this.loading = true

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

到目前为止，我只是传递姓氏，但最终，它将传递一个唯一的 ID。

这是测试个人资料页面，这里我只是想获取要显示的用户信息以测试页面。因此，如果一切正常，用户的名字应该显示:

<template>
 <div class="Profile">
  <div class="container">
   <div class="row">
    <template slot="items" slot-scope="records">
      <h1> Student Name: {{ records.items.firstName }}</h1>
    </template>
  </div>
</div>

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

export default {
data() {
  return {
    records: {},
  }
},

async created() {
  this.GetInquiriesByUser()
},
methods: {
  async GetInquiriesByUser() {
    this.loading = true

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

这是我的routes.js

{
path: '/Profile/:lastName',
name: 'GetInquiry',
component: Profile
}

当我在 Chrome 上打开开发工具时，我得到本地主机:61601/api/GetInquiry/[object%20Object]

我在后端使用 .netcore api，它得到了预期的结果，但似乎无法在我的前端上得到它。如果有人可以帮助我并为我指明正确的方向，那就太好了。如果有人需要更多详细信息，请告诉我。

Answer 1

您正在 vue-resource 上传递一个对象而不是值。

只需将姓氏直接传递到路由中即可正常工作。

this.$http.get(`http://localhost:61601/api/GetInquiry/${lastName}`);