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.

test this.$http.get(|localhost:61601/api/GetInquiry/${lastName : lastName}|) alteration | to ` in http the finish object you do not need to declare another object to pass the value of the property, just pass the value without having to specify the property. — Hamilton Gabriel
– Hamilton Gabriel, Commented Nov 15, 2018 at 0:01

keysl · Accepted Answer · 2018-11-15 01:58:47Z

2

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}`);

answered Nov 15, 2018 at 1:58

keysl

2,1671 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing Parameter in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related