Load a VUE component with parameters
I have
<a role="button" v-on:click="setMemberName(item)">
And it calls a method:
methods:{
setMemberName(item) {
alert(item.email);
this.$router.push('about');
}
},
The alert gets fired and the router gets called but I need to send the parameter of item.email and I need to capture that when the 'about' vue gets loaded. I have a simple alert being called using:
,
mounted:function () {
alert("Hello");
},
But I would like it to say "Hello " then the email address like "Hello Smith@jmail.com". I really need the email address so I can call a webservice but Hello is fine for this problem. As you can tell VUE is new to me.
I have tried:
this.$router.push({ name: 'about', params: { itemEmail: item.email } })
but it seems that it never loads the 'about' vue. Thanks for the help.
OK-- edit-- It does get fired if I use the proper case 'About' instead or 'about' but I still need help on the capture side
Code for the about vue: a simple div and some script code:
<script>
export default {
name: 'About',
data() {
return {
}
},
methods:{
},
mounted:function () {
alert("Hello");
},
created(){
},
}
</script>
javascript vue.js vuejs2 vue-router
edited Dec 27 at 14:34
Boussadjra Brahim
5,4873631
asked Dec 27 at 13:34
user1314159
314210
add a comment |
I have
<a role="button" v-on:click="setMemberName(item)">
And it calls a method:
methods:{
setMemberName(item) {
alert(item.email);
this.$router.push('about');
}
},
The alert gets fired and the router gets called but I need to send the parameter of item.email and I need to capture that when the 'about' vue gets loaded. I have a simple alert being called using:
,
mounted:function () {
alert("Hello");
},
But I would like it to say "Hello " then the email address like "Hello Smith@jmail.com". I really need the email address so I can call a webservice but Hello is fine for this problem. As you can tell VUE is new to me.
I have tried:
this.$router.push({ name: 'about', params: { itemEmail: item.email } })
but it seems that it never loads the 'about' vue. Thanks for the help.
OK-- edit-- It does get fired if I use the proper case 'About' instead or 'about' but I still need help on the capture side
Code for the about vue: a simple div and some script code:
<script>
export default {
name: 'About',
data() {
return {
}
},
methods:{
},
mounted:function () {
alert("Hello");
},
created(){
},
}
</script>
javascript vue.js vuejs2 vue-router
edited Dec 27 at 14:34
Boussadjra Brahim
5,4873631
asked Dec 27 at 13:34
user1314159
314210
please provide the code ofabout.vue
– Boussadjra Brahim
Dec 27 at 13:42
Create a new component<my-a>or something and pass the value byprops?
– Cody G.
Dec 27 at 13:52
add a comment |
I have
<a role="button" v-on:click="setMemberName(item)">
And it calls a method:
methods:{
setMemberName(item) {
alert(item.email);
this.$router.push('about');
}
},
The alert gets fired and the router gets called but I need to send the parameter of item.email and I need to capture that when the 'about' vue gets loaded. I have a simple alert being called using:
,
mounted:function () {
alert("Hello");
},
But I would like it to say "Hello " then the email address like "Hello Smith@jmail.com". I really need the email address so I can call a webservice but Hello is fine for this problem. As you can tell VUE is new to me.
I have tried:
this.$router.push({ name: 'about', params: { itemEmail: item.email } })
but it seems that it never loads the 'about' vue. Thanks for the help.
OK-- edit-- It does get fired if I use the proper case 'About' instead or 'about' but I still need help on the capture side
Code for the about vue: a simple div and some script code:
<script>
export default {
name: 'About',
data() {
return {
}
},
methods:{
},
mounted:function () {
alert("Hello");
},
created(){
},
}
</script>
javascript vue.js vuejs2 vue-router
edited Dec 27 at 14:34
Boussadjra Brahim
5,4873631
asked Dec 27 at 13:34
user1314159
314210
I have
<a role="button" v-on:click="setMemberName(item)">
And it calls a method:
methods:{
setMemberName(item) {
alert(item.email);
this.$router.push('about');
}
},
The alert gets fired and the router gets called but I need to send the parameter of item.email and I need to capture that when the 'about' vue gets loaded. I have a simple alert being called using:
,
mounted:function () {
alert("Hello");
},
But I would like it to say "Hello " then the email address like "Hello Smith@jmail.com". I really need the email address so I can call a webservice but Hello is fine for this problem. As you can tell VUE is new to me.
I have tried:
this.$router.push({ name: 'about', params: { itemEmail: item.email } })
but it seems that it never loads the 'about' vue. Thanks for the help.
OK-- edit-- It does get fired if I use the proper case 'About' instead or 'about' but I still need help on the capture side
Code for the about vue: a simple div and some script code:
<script>
export default {
name: 'About',
data() {
return {
}
},
methods:{
},
mounted:function () {
alert("Hello");
},
created(){
},
}
</script>
javascript vue.js vuejs2 vue-router
javascript vue.js vuejs2 vue-router
edited Dec 27 at 14:34
Boussadjra Brahim
5,4873631
asked Dec 27 at 13:34
user1314159
314210
edited Dec 27 at 14:34
Boussadjra Brahim
5,4873631
asked Dec 27 at 13:34
user1314159
314210
edited Dec 27 at 14:34
Boussadjra Brahim
5,4873631
edited Dec 27 at 14:34
Boussadjra Brahim
5,4873631
edited Dec 27 at 14:34
Boussadjra Brahim
5,4873631
5,4873631
asked Dec 27 at 13:34
user1314159
314210
asked Dec 27 at 13:34
user1314159
314210
asked Dec 27 at 13:34
user1314159
314210
314210
please provide the code ofabout.vue
– Boussadjra Brahim
Dec 27 at 13:42
Create a new component<my-a>or something and pass the value byprops?
– Cody G.
Dec 27 at 13:52
add a comment |
please provide the code ofabout.vue
– Boussadjra Brahim
Dec 27 at 13:42
Create a new component<my-a>or something and pass the value byprops?
– Cody G.
Dec 27 at 13:52
please provide the code of
about.vue– Boussadjra Brahim
Dec 27 at 13:42
please provide the code of
about.vue– Boussadjra Brahim
Dec 27 at 13:42
Create a new component
<my-a> or something and pass the value by props ?– Cody G.
Dec 27 at 13:52
Create a new component
<my-a> or something and pass the value by props ?– Cody G.
Dec 27 at 13:52
add a comment |
2 Answers
2
active
oldest
votes
There are many ways of solving this issue, your are using route params so you need to define the param in the route:
routes: [
{ path: '/about/:email', component: About }
]
Then you can access the param in the About component
In the template:
<div>Email: {{ $route.params.email }}</div>
In the script:
sayHello() {
alert($route.params.email);
}
Note that you could also use route query params or route props, read the docs at: https://router.vuejs.org/guide/
edited Dec 27 at 14:46
FK82
3,40231827
answered Dec 27 at 13:57
Rafael Guillen
1,093723
This works for me but I was wondering can you send 2 or more parameter? and how would you set that up? I didn't see that in the documentation. Would you set it up as an array and parse it on the collection side?
– user1314159
Dec 27 at 14:54
You can send the data withrouter query, check @codenamev answer, nevertheless, you should consider usingVuexto store and share the global state of your app.
– Rafael Guillen
Dec 27 at 15:42
add a comment |
If you update your push to (see docs for full options):
this.$router.push({ name: 'about', query: { itemEmail: item.email } })
You can access the query parameters (See docs here):
this.$router.query.itemEmail
answered Dec 27 at 13:58
codenamev
1,4181220
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%2f53945971%2fload-a-vue-component-with-parameters%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
There are many ways of solving this issue, your are using route params so you need to define the param in the route:
routes: [
{ path: '/about/:email', component: About }
]
Then you can access the param in the About component
In the template:
<div>Email: {{ $route.params.email }}</div>
In the script:
sayHello() {
alert($route.params.email);
}
Note that you could also use route query params or route props, read the docs at: https://router.vuejs.org/guide/
edited Dec 27 at 14:46
FK82
3,40231827
answered Dec 27 at 13:57
Rafael Guillen
1,093723
This works for me but I was wondering can you send 2 or more parameter? and how would you set that up? I didn't see that in the documentation. Would you set it up as an array and parse it on the collection side?
– user1314159
Dec 27 at 14:54
You can send the data withrouter query, check @codenamev answer, nevertheless, you should consider usingVuexto store and share the global state of your app.
– Rafael Guillen
Dec 27 at 15:42
add a comment |
There are many ways of solving this issue, your are using route params so you need to define the param in the route:
routes: [
{ path: '/about/:email', component: About }
]
Then you can access the param in the About component
In the template:
<div>Email: {{ $route.params.email }}</div>
In the script:
sayHello() {
alert($route.params.email);
}
Note that you could also use route query params or route props, read the docs at: https://router.vuejs.org/guide/
edited Dec 27 at 14:46
FK82
3,40231827
answered Dec 27 at 13:57
Rafael Guillen
1,093723
This works for me but I was wondering can you send 2 or more parameter? and how would you set that up? I didn't see that in the documentation. Would you set it up as an array and parse it on the collection side?
– user1314159
Dec 27 at 14:54
You can send the data withrouter query, check @codenamev answer, nevertheless, you should consider usingVuexto store and share the global state of your app.
– Rafael Guillen
Dec 27 at 15:42
add a comment |
There are many ways of solving this issue, your are using route params so you need to define the param in the route:
routes: [
{ path: '/about/:email', component: About }
]
Then you can access the param in the About component
In the template:
<div>Email: {{ $route.params.email }}</div>
In the script:
sayHello() {
alert($route.params.email);
}
Note that you could also use route query params or route props, read the docs at: https://router.vuejs.org/guide/
edited Dec 27 at 14:46
FK82
3,40231827
answered Dec 27 at 13:57
Rafael Guillen
1,093723
There are many ways of solving this issue, your are using route params so you need to define the param in the route:
routes: [
{ path: '/about/:email', component: About }
]
Then you can access the param in the About component
In the template:
<div>Email: {{ $route.params.email }}</div>
In the script:
sayHello() {
alert($route.params.email);
}
Note that you could also use route query params or route props, read the docs at: https://router.vuejs.org/guide/
edited Dec 27 at 14:46
FK82
3,40231827
answered Dec 27 at 13:57
Rafael Guillen
1,093723
edited Dec 27 at 14:46
FK82
3,40231827
edited Dec 27 at 14:46
FK82
3,40231827
edited Dec 27 at 14:46
FK82
3,40231827
3,40231827
answered Dec 27 at 13:57
Rafael Guillen
1,093723
answered Dec 27 at 13:57
Rafael Guillen
1,093723
answered Dec 27 at 13:57
Rafael Guillen
1,093723
1,093723
This works for me but I was wondering can you send 2 or more parameter? and how would you set that up? I didn't see that in the documentation. Would you set it up as an array and parse it on the collection side?
– user1314159
Dec 27 at 14:54
You can send the data withrouter query, check @codenamev answer, nevertheless, you should consider usingVuexto store and share the global state of your app.
– Rafael Guillen
Dec 27 at 15:42
add a comment |
This works for me but I was wondering can you send 2 or more parameter? and how would you set that up? I didn't see that in the documentation. Would you set it up as an array and parse it on the collection side?
– user1314159
Dec 27 at 14:54
You can send the data withrouter query, check @codenamev answer, nevertheless, you should consider usingVuexto store and share the global state of your app.
– Rafael Guillen
Dec 27 at 15:42
This works for me but I was wondering can you send 2 or more parameter? and how would you set that up? I didn't see that in the documentation. Would you set it up as an array and parse it on the collection side?
– user1314159
Dec 27 at 14:54
This works for me but I was wondering can you send 2 or more parameter? and how would you set that up? I didn't see that in the documentation. Would you set it up as an array and parse it on the collection side?
– user1314159
Dec 27 at 14:54
You can send the data with
router query, check @codenamev answer, nevertheless, you should consider using Vuex to store and share the global state of your app.– Rafael Guillen
Dec 27 at 15:42
You can send the data with
router query, check @codenamev answer, nevertheless, you should consider using Vuex to store and share the global state of your app.– Rafael Guillen
Dec 27 at 15:42
add a comment |
If you update your push to (see docs for full options):
this.$router.push({ name: 'about', query: { itemEmail: item.email } })
You can access the query parameters (See docs here):
this.$router.query.itemEmail
answered Dec 27 at 13:58
codenamev
1,4181220
add a comment |
If you update your push to (see docs for full options):
this.$router.push({ name: 'about', query: { itemEmail: item.email } })
You can access the query parameters (See docs here):
this.$router.query.itemEmail
answered Dec 27 at 13:58
codenamev
1,4181220
add a comment |
If you update your push to (see docs for full options):
this.$router.push({ name: 'about', query: { itemEmail: item.email } })
You can access the query parameters (See docs here):
this.$router.query.itemEmail
answered Dec 27 at 13:58
codenamev
1,4181220
If you update your push to (see docs for full options):
this.$router.push({ name: 'about', query: { itemEmail: item.email } })
You can access the query parameters (See docs here):
this.$router.query.itemEmail
answered Dec 27 at 13:58
codenamev
1,4181220
answered Dec 27 at 13:58
codenamev
1,4181220
answered Dec 27 at 13:58
codenamev
1,4181220
answered Dec 27 at 13:58
codenamev
1,4181220
1,4181220
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53945971%2fload-a-vue-component-with-parameters%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
please provide the code of
about.vue– Boussadjra Brahim
Dec 27 at 13:42
Create a new component
<my-a>or something and pass the value byprops?– Cody G.
Dec 27 at 13:52