在 Vue.js 中传递参数答案

【问题标题】：Passing Parameter in Vue.js在 Vue.js 中传递参数
【发布时间】：2019-04-18 00:37:46
【问题描述】：

我试图在我的 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。

这里是测试个人资料页面，这里我只是试图让用户信息显示以测试页面。因此，如果一切正常，用户的 firstName 应该会显示：

<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 上打开开发工具时，我得到 localhost:61601/api/GetInquiry/[object%20Object]

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

【问题讨论】：

测试这个。$http.get(|localhost:61601/api/GetInquiry/${lastName : lastName}|) 更改 | `在http中的finish对象你不需要声明另一个对象来传递属性的值，只需传递值而不必指定属性。

标签： javascript vue.js routes parameter-passing vue-router

【解决方案1】：

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

只需将姓氏直接传递到路由中，它应该可以正常工作。

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

【讨论】：