Get data by id using Axios and VueJS

Question

I have this get-function on my server-side that I want to use to get a specific entry in my database by giving the ID as a parameter. In my VueJS application I've written an Axios get-call but it doesn't give me any data. It only says

"Cannot GET ...".

I know the ID I'm giving the function is correct so that's not the problem.

Client-side:

loadData() {
     axios.get('http://localhost:8080/route', {
        params: {
            id: this.selectedRoute
        }
     })
     .then(response => (this.chosenRoute = response.data));
}

Server-side:

app.get('/route/:id', function(req, res) {
    const routeId = req.params.id;
    Route.findById(routeId, (err, route) => {
        res.set("Access-Control-Allow-Origin", "*");
        res.json(route);
    });
});
    enter code here

Solution

Try something like this by concatenating the id which is this.selectedRoute to the url :

  loadData() {
     axios.get('http://localhost:8080/route/'+ this.selectedRoute)
              .then(response => (this.chosenRoute = response.data));
}

In your last question you have this :

      <select name="routeSelect" v-model="selectedRoute">
          <option v-for="routes in result" v-bind:key="routes.name" v- 
           bind:value="routes.name"> {{ routes.name }} </option>
      </select>

this doesn't work because the selectedRoute is the route name which isn't not an id to solve that you have to do this :

          <option v-for="routes in result" v-bind:key="routes.name" v- 
           bind:value="routes.id" >...

by binding the select options value to the route id

Comments

[M. H]

I had already changed the v-bind:value to be the id instead of the name so that was not the problem. However, your first suggestion to concatenate the id to the url worked. Thanks!

[Boussadjra Brahim]

you're welcome, usually i prefer to bind the value to the object, in this case to the routes item