Get data by id using Axios and VueJS

user_5294311 0
Viewed 15237

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
axios vuejs2 vue.js typescript javascript
1 Answers

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

user_81728570
Related