Passing Parameter in Vue.js

Question

I am trying to pass a parameter in my Vue.js project, but having no luck. The goal is when I select a user from a list, it should route to that specific user's profile as localhost:61601/Profile/"lastName"

Here is my method when I click next to the users name:

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

As of right now, I am just passing the lastName, but eventually, it will pass a unique id.

Here is the test Profile Page, Here I am just trying to get that users information to display to test the page. So if everything works, the users firstName should display:

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

Here is my routes.js

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

When i open dev tools on chrome, I get localhost:61601/api/GetInquiry/[object%20Object]

Im using .netcore api for the backend, which gets results as expected, just cannot seem to get it up on my frontend. If someone can help me and point me to the right direction that would be awesome. Please do let me know if anyone needs more details.

Answer 1

You are passing an object on the vue-resource instead of the value.

Just pass directly the lastname into the route and it should work as fine.

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