Get data by id using Axios and VueJS
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
javascript typescript vue.js vuejs2 axios
edited Nov 15 '18 at 21:54
Boussadjra Brahim
8,1843733
asked Nov 15 '18 at 21:45
M. HM. H
1047
add a comment |
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
javascript typescript vue.js vuejs2 axios
edited Nov 15 '18 at 21:54
Boussadjra Brahim
8,1843733
asked Nov 15 '18 at 21:45
M. HM. H
1047
add a comment |
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
javascript typescript vue.js vuejs2 axios
edited Nov 15 '18 at 21:54
Boussadjra Brahim
8,1843733
asked Nov 15 '18 at 21:45
M. HM. H
1047
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
javascript typescript vue.js vuejs2 axios
javascript typescript vue.js vuejs2 axios
edited Nov 15 '18 at 21:54
Boussadjra Brahim
8,1843733
asked Nov 15 '18 at 21:45
M. HM. H
1047
edited Nov 15 '18 at 21:54
Boussadjra Brahim
8,1843733
asked Nov 15 '18 at 21:45
M. HM. H
1047
edited Nov 15 '18 at 21:54
Boussadjra Brahim
8,1843733
edited Nov 15 '18 at 21:54
Boussadjra Brahim
8,1843733
edited Nov 15 '18 at 21:54
Boussadjra Brahim
8,1843733
8,1843733
asked Nov 15 '18 at 21:45
M. HM. H
1047
asked Nov 15 '18 at 21:45
M. HM. H
1047
asked Nov 15 '18 at 21:45
M. HM. H
1047
1047
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
answered Nov 15 '18 at 21:48
Boussadjra BrahimBoussadjra Brahim
8,1843733
1
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!
– M. H
Nov 15 '18 at 21:55
1
you're welcome, usually i prefer to bind the value to the object, in this case to the routes item
– Boussadjra Brahim
Nov 15 '18 at 21:57
could you accept my answer if there's not something went wrong with it
– Boussadjra Brahim
Nov 15 '18 at 22:06
1
Yes sorry it didn't let me accept it first because it hadn't been enough time
– M. H
Nov 15 '18 at 22:21
no problem my bro, we are always here to help you
– Boussadjra Brahim
Nov 15 '18 at 22:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53328343%2fget-data-by-id-using-axios-and-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Nov 15 '18 at 21:48
Boussadjra BrahimBoussadjra Brahim
8,1843733
1
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!
– M. H
Nov 15 '18 at 21:55
1
you're welcome, usually i prefer to bind the value to the object, in this case to the routes item
– Boussadjra Brahim
Nov 15 '18 at 21:57
could you accept my answer if there's not something went wrong with it
– Boussadjra Brahim
Nov 15 '18 at 22:06
1
Yes sorry it didn't let me accept it first because it hadn't been enough time
– M. H
Nov 15 '18 at 22:21
no problem my bro, we are always here to help you
– Boussadjra Brahim
Nov 15 '18 at 22:23
add a comment |
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
answered Nov 15 '18 at 21:48
Boussadjra BrahimBoussadjra Brahim
8,1843733
1
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!
– M. H
Nov 15 '18 at 21:55
1
you're welcome, usually i prefer to bind the value to the object, in this case to the routes item
– Boussadjra Brahim
Nov 15 '18 at 21:57
could you accept my answer if there's not something went wrong with it
– Boussadjra Brahim
Nov 15 '18 at 22:06
1
Yes sorry it didn't let me accept it first because it hadn't been enough time
– M. H
Nov 15 '18 at 22:21
no problem my bro, we are always here to help you
– Boussadjra Brahim
Nov 15 '18 at 22:23
add a comment |
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
answered Nov 15 '18 at 21:48
Boussadjra BrahimBoussadjra Brahim
8,1843733
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
answered Nov 15 '18 at 21:48
Boussadjra BrahimBoussadjra Brahim
8,1843733
edited Nov 15 '18 at 21:55
answered Nov 15 '18 at 21:48
Boussadjra BrahimBoussadjra Brahim
8,1843733
answered Nov 15 '18 at 21:48
Boussadjra BrahimBoussadjra Brahim
8,1843733
answered Nov 15 '18 at 21:48
Boussadjra BrahimBoussadjra Brahim
8,1843733
8,1843733
1
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!
– M. H
Nov 15 '18 at 21:55
1
you're welcome, usually i prefer to bind the value to the object, in this case to the routes item
– Boussadjra Brahim
Nov 15 '18 at 21:57
could you accept my answer if there's not something went wrong with it
– Boussadjra Brahim
Nov 15 '18 at 22:06
1
Yes sorry it didn't let me accept it first because it hadn't been enough time
– M. H
Nov 15 '18 at 22:21
no problem my bro, we are always here to help you
– Boussadjra Brahim
Nov 15 '18 at 22:23
add a comment |
1
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!
– M. H
Nov 15 '18 at 21:55
1
you're welcome, usually i prefer to bind the value to the object, in this case to the routes item
– Boussadjra Brahim
Nov 15 '18 at 21:57
could you accept my answer if there's not something went wrong with it
– Boussadjra Brahim
Nov 15 '18 at 22:06
1
Yes sorry it didn't let me accept it first because it hadn't been enough time
– M. H
Nov 15 '18 at 22:21
no problem my bro, we are always here to help you
– Boussadjra Brahim
Nov 15 '18 at 22:23
1
1
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!
– M. H
Nov 15 '18 at 21:55
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!
– M. H
Nov 15 '18 at 21:55
1
1
you're welcome, usually i prefer to bind the value to the object, in this case to the routes item
– Boussadjra Brahim
Nov 15 '18 at 21:57
you're welcome, usually i prefer to bind the value to the object, in this case to the routes item
– Boussadjra Brahim
Nov 15 '18 at 21:57
could you accept my answer if there's not something went wrong with it
– Boussadjra Brahim
Nov 15 '18 at 22:06
could you accept my answer if there's not something went wrong with it
– Boussadjra Brahim
Nov 15 '18 at 22:06
1
1
Yes sorry it didn't let me accept it first because it hadn't been enough time
– M. H
Nov 15 '18 at 22:21
Yes sorry it didn't let me accept it first because it hadn't been enough time
– M. H
Nov 15 '18 at 22:21
no problem my bro, we are always here to help you
– Boussadjra Brahim
Nov 15 '18 at 22:23
no problem my bro, we are always here to help you
– Boussadjra Brahim
Nov 15 '18 at 22:23
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53328343%2fget-data-by-id-using-axios-and-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
