时间戳

首页 > 解决方案 > 在 Vue.js 中传递参数

javascript - 在 Vue.js 中传递参数

问题描述

我试图在我的 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，它得到了预期的结果，只是似乎无法在我的前端得到它。如果有人可以帮助我并指出我正确的方向，那就太棒了。如果有人需要更多详细信息，请告诉我。

标签： javascriptvue.jsroutesparameter-passingvue-router

解决方案

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

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

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

推荐阅读