Vue.js $children by component name
I'm trying to access a specific child by name. At the moment, because of where the child is, I'm calling the child by this:
this.$root.$children[0]
Which is ok as long as that child is always [0]
but it would be great if there’s a way to do something like:
this.$root.$children['detail']
I keep thinking $refs
might be the answer to my problem but can never find a way that it helps me.
Any ideas?
javascript vue.js web-frameworks
add a comment |
I'm trying to access a specific child by name. At the moment, because of where the child is, I'm calling the child by this:
this.$root.$children[0]
Which is ok as long as that child is always [0]
but it would be great if there’s a way to do something like:
this.$root.$children['detail']
I keep thinking $refs
might be the answer to my problem but can never find a way that it helps me.
Any ideas?
javascript vue.js web-frameworks
add a comment |
I'm trying to access a specific child by name. At the moment, because of where the child is, I'm calling the child by this:
this.$root.$children[0]
Which is ok as long as that child is always [0]
but it would be great if there’s a way to do something like:
this.$root.$children['detail']
I keep thinking $refs
might be the answer to my problem but can never find a way that it helps me.
Any ideas?
javascript vue.js web-frameworks
I'm trying to access a specific child by name. At the moment, because of where the child is, I'm calling the child by this:
this.$root.$children[0]
Which is ok as long as that child is always [0]
but it would be great if there’s a way to do something like:
this.$root.$children['detail']
I keep thinking $refs
might be the answer to my problem but can never find a way that it helps me.
Any ideas?
javascript vue.js web-frameworks
javascript vue.js web-frameworks
edited Jan 2 at 12:27
Alex
2,28233051
2,28233051
asked Mar 3 '16 at 10:12
FlakxFlakx
3822922
3822922
add a comment |
add a comment |
5 Answers
5
active
oldest
votes
Is this child you are talking about really a child of the component that you want to access it from? In this case, v-ref
is indeed the answer:
// in the code of the parent component, access the referenced child component like this:
this.$refs.detailsChild
<!-- Template of the parent component, assuming your child Component is called Details -->
<details v-ref:details-child></details>
relevant API Documentation: http://vuejs.org/api/#v-ref
13
For people coming to this using Vue v2, you would instead set theref
attribute in the template like this:<details ref="detailsChild"></details>
. vuejs.org/v2/api/#ref
– thanksd
Dec 19 '17 at 15:34
add a comment |
You can use this property:
this.$root.$children[0].$options.name
For example:
this.$root.$children.find(child => { return child.$options.name === "name"; });
This just accesses the name of the first component in the$children
array, which is not what OP is asking for.
– thanksd
Dec 19 '17 at 15:40
1
You can use this code to filter children by name.
– drinor
Jan 3 '18 at 9:25
How so? Your one line of code is accessing the name of the first element in the array. You haven't given any explanation for how this line of code could be used to solve OP's problem.
– thanksd
Jan 9 '18 at 22:03
You can use find:this.$root.$children.find(child => { return child.$options.name === "name"; });
. I will update the answer.
– drinor
Jan 25 '18 at 12:02
To select child by component name:this.$root.$children.find(child => { return child.$options._componentTag === "tabs-component"; });
– Kip
Oct 16 '18 at 21:24
add a comment |
All is pretty much the same, but in Vue 2 you need to use: <details ref="details-child"></details>
instead of v-ref .
Then all you need to do is use this.$refs.details-child;
and you can access any of it's properties.
add a comment |
this.$root.$children[0].constructor.name
9
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".
– abarisone
Sep 8 '16 at 7:44
add a comment |
You don't necessarily need $refs
, in fact sometimes they are not feasible if you have deeply nested components. I've found this Q&A several times while searching, but finally decidedly to implement my own solution since I run into this situation pretty frequently. Don't balk at the old-school for loops, they are necessary for a couple of reasons, for one, I test for x<descendants.length
(rather than setting something such as len=descendants.length
up front, and testing against that) on every iteration as I'm pushing on to the stack in the second for loop.
First, usage:
let unPersonalizable = matchingDescendants(this, /a.checkimprintfiinformation$/, {first: true});
Implementation:
function matchingDescendants(vm, matcher, options) {
let descendants = vm.$children;
let descendant;
let returnFirst = (options || {}).first;
let matches = ;
for (let x=0; x<descendants.length; x++) {
descendant = descendants[x];
if (matcher.test(descendant.$vnode.tag)) {
if (returnFirst) {
return descendant;
}
else {
matches.push(descendant);
}
}
for (let y=0, len = descendant.$children.length; y<len; y++) {
descendants.push(descendant.$children[y]);
}
}
return matches.length === 0 ? false : matches;
}
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%2f35769139%2fvue-js-children-by-component-name%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
Is this child you are talking about really a child of the component that you want to access it from? In this case, v-ref
is indeed the answer:
// in the code of the parent component, access the referenced child component like this:
this.$refs.detailsChild
<!-- Template of the parent component, assuming your child Component is called Details -->
<details v-ref:details-child></details>
relevant API Documentation: http://vuejs.org/api/#v-ref
13
For people coming to this using Vue v2, you would instead set theref
attribute in the template like this:<details ref="detailsChild"></details>
. vuejs.org/v2/api/#ref
– thanksd
Dec 19 '17 at 15:34
add a comment |
Is this child you are talking about really a child of the component that you want to access it from? In this case, v-ref
is indeed the answer:
// in the code of the parent component, access the referenced child component like this:
this.$refs.detailsChild
<!-- Template of the parent component, assuming your child Component is called Details -->
<details v-ref:details-child></details>
relevant API Documentation: http://vuejs.org/api/#v-ref
13
For people coming to this using Vue v2, you would instead set theref
attribute in the template like this:<details ref="detailsChild"></details>
. vuejs.org/v2/api/#ref
– thanksd
Dec 19 '17 at 15:34
add a comment |
Is this child you are talking about really a child of the component that you want to access it from? In this case, v-ref
is indeed the answer:
// in the code of the parent component, access the referenced child component like this:
this.$refs.detailsChild
<!-- Template of the parent component, assuming your child Component is called Details -->
<details v-ref:details-child></details>
relevant API Documentation: http://vuejs.org/api/#v-ref
Is this child you are talking about really a child of the component that you want to access it from? In this case, v-ref
is indeed the answer:
// in the code of the parent component, access the referenced child component like this:
this.$refs.detailsChild
<!-- Template of the parent component, assuming your child Component is called Details -->
<details v-ref:details-child></details>
relevant API Documentation: http://vuejs.org/api/#v-ref
// in the code of the parent component, access the referenced child component like this:
this.$refs.detailsChild
<!-- Template of the parent component, assuming your child Component is called Details -->
<details v-ref:details-child></details>
// in the code of the parent component, access the referenced child component like this:
this.$refs.detailsChild
<!-- Template of the parent component, assuming your child Component is called Details -->
<details v-ref:details-child></details>
edited Sep 16 '17 at 11:23
answered Mar 3 '16 at 11:48
Linus BorgLinus Borg
11.7k13839
11.7k13839
13
For people coming to this using Vue v2, you would instead set theref
attribute in the template like this:<details ref="detailsChild"></details>
. vuejs.org/v2/api/#ref
– thanksd
Dec 19 '17 at 15:34
add a comment |
13
For people coming to this using Vue v2, you would instead set theref
attribute in the template like this:<details ref="detailsChild"></details>
. vuejs.org/v2/api/#ref
– thanksd
Dec 19 '17 at 15:34
13
13
For people coming to this using Vue v2, you would instead set the
ref
attribute in the template like this: <details ref="detailsChild"></details>
. vuejs.org/v2/api/#ref– thanksd
Dec 19 '17 at 15:34
For people coming to this using Vue v2, you would instead set the
ref
attribute in the template like this: <details ref="detailsChild"></details>
. vuejs.org/v2/api/#ref– thanksd
Dec 19 '17 at 15:34
add a comment |
You can use this property:
this.$root.$children[0].$options.name
For example:
this.$root.$children.find(child => { return child.$options.name === "name"; });
This just accesses the name of the first component in the$children
array, which is not what OP is asking for.
– thanksd
Dec 19 '17 at 15:40
1
You can use this code to filter children by name.
– drinor
Jan 3 '18 at 9:25
How so? Your one line of code is accessing the name of the first element in the array. You haven't given any explanation for how this line of code could be used to solve OP's problem.
– thanksd
Jan 9 '18 at 22:03
You can use find:this.$root.$children.find(child => { return child.$options.name === "name"; });
. I will update the answer.
– drinor
Jan 25 '18 at 12:02
To select child by component name:this.$root.$children.find(child => { return child.$options._componentTag === "tabs-component"; });
– Kip
Oct 16 '18 at 21:24
add a comment |
You can use this property:
this.$root.$children[0].$options.name
For example:
this.$root.$children.find(child => { return child.$options.name === "name"; });
This just accesses the name of the first component in the$children
array, which is not what OP is asking for.
– thanksd
Dec 19 '17 at 15:40
1
You can use this code to filter children by name.
– drinor
Jan 3 '18 at 9:25
How so? Your one line of code is accessing the name of the first element in the array. You haven't given any explanation for how this line of code could be used to solve OP's problem.
– thanksd
Jan 9 '18 at 22:03
You can use find:this.$root.$children.find(child => { return child.$options.name === "name"; });
. I will update the answer.
– drinor
Jan 25 '18 at 12:02
To select child by component name:this.$root.$children.find(child => { return child.$options._componentTag === "tabs-component"; });
– Kip
Oct 16 '18 at 21:24
add a comment |
You can use this property:
this.$root.$children[0].$options.name
For example:
this.$root.$children.find(child => { return child.$options.name === "name"; });
You can use this property:
this.$root.$children[0].$options.name
For example:
this.$root.$children.find(child => { return child.$options.name === "name"; });
edited Jan 25 '18 at 12:02
answered Dec 13 '16 at 12:36
drinordrinor
3,22622135
3,22622135
This just accesses the name of the first component in the$children
array, which is not what OP is asking for.
– thanksd
Dec 19 '17 at 15:40
1
You can use this code to filter children by name.
– drinor
Jan 3 '18 at 9:25
How so? Your one line of code is accessing the name of the first element in the array. You haven't given any explanation for how this line of code could be used to solve OP's problem.
– thanksd
Jan 9 '18 at 22:03
You can use find:this.$root.$children.find(child => { return child.$options.name === "name"; });
. I will update the answer.
– drinor
Jan 25 '18 at 12:02
To select child by component name:this.$root.$children.find(child => { return child.$options._componentTag === "tabs-component"; });
– Kip
Oct 16 '18 at 21:24
add a comment |
This just accesses the name of the first component in the$children
array, which is not what OP is asking for.
– thanksd
Dec 19 '17 at 15:40
1
You can use this code to filter children by name.
– drinor
Jan 3 '18 at 9:25
How so? Your one line of code is accessing the name of the first element in the array. You haven't given any explanation for how this line of code could be used to solve OP's problem.
– thanksd
Jan 9 '18 at 22:03
You can use find:this.$root.$children.find(child => { return child.$options.name === "name"; });
. I will update the answer.
– drinor
Jan 25 '18 at 12:02
To select child by component name:this.$root.$children.find(child => { return child.$options._componentTag === "tabs-component"; });
– Kip
Oct 16 '18 at 21:24
This just accesses the name of the first component in the
$children
array, which is not what OP is asking for.– thanksd
Dec 19 '17 at 15:40
This just accesses the name of the first component in the
$children
array, which is not what OP is asking for.– thanksd
Dec 19 '17 at 15:40
1
1
You can use this code to filter children by name.
– drinor
Jan 3 '18 at 9:25
You can use this code to filter children by name.
– drinor
Jan 3 '18 at 9:25
How so? Your one line of code is accessing the name of the first element in the array. You haven't given any explanation for how this line of code could be used to solve OP's problem.
– thanksd
Jan 9 '18 at 22:03
How so? Your one line of code is accessing the name of the first element in the array. You haven't given any explanation for how this line of code could be used to solve OP's problem.
– thanksd
Jan 9 '18 at 22:03
You can use find:
this.$root.$children.find(child => { return child.$options.name === "name"; });
. I will update the answer.– drinor
Jan 25 '18 at 12:02
You can use find:
this.$root.$children.find(child => { return child.$options.name === "name"; });
. I will update the answer.– drinor
Jan 25 '18 at 12:02
To select child by component name:
this.$root.$children.find(child => { return child.$options._componentTag === "tabs-component"; });
– Kip
Oct 16 '18 at 21:24
To select child by component name:
this.$root.$children.find(child => { return child.$options._componentTag === "tabs-component"; });
– Kip
Oct 16 '18 at 21:24
add a comment |
All is pretty much the same, but in Vue 2 you need to use: <details ref="details-child"></details>
instead of v-ref .
Then all you need to do is use this.$refs.details-child;
and you can access any of it's properties.
add a comment |
All is pretty much the same, but in Vue 2 you need to use: <details ref="details-child"></details>
instead of v-ref .
Then all you need to do is use this.$refs.details-child;
and you can access any of it's properties.
add a comment |
All is pretty much the same, but in Vue 2 you need to use: <details ref="details-child"></details>
instead of v-ref .
Then all you need to do is use this.$refs.details-child;
and you can access any of it's properties.
All is pretty much the same, but in Vue 2 you need to use: <details ref="details-child"></details>
instead of v-ref .
Then all you need to do is use this.$refs.details-child;
and you can access any of it's properties.
answered Jan 2 at 12:17
ArminArmin
264
264
add a comment |
add a comment |
this.$root.$children[0].constructor.name
9
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".
– abarisone
Sep 8 '16 at 7:44
add a comment |
this.$root.$children[0].constructor.name
9
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".
– abarisone
Sep 8 '16 at 7:44
add a comment |
this.$root.$children[0].constructor.name
this.$root.$children[0].constructor.name
edited Sep 8 '16 at 8:04
Draken
2,58682641
2,58682641
answered Sep 8 '16 at 7:22
user4229130user4229130
422
422
9
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".
– abarisone
Sep 8 '16 at 7:44
add a comment |
9
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".
– abarisone
Sep 8 '16 at 7:44
9
9
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".
– abarisone
Sep 8 '16 at 7:44
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".
– abarisone
Sep 8 '16 at 7:44
add a comment |
You don't necessarily need $refs
, in fact sometimes they are not feasible if you have deeply nested components. I've found this Q&A several times while searching, but finally decidedly to implement my own solution since I run into this situation pretty frequently. Don't balk at the old-school for loops, they are necessary for a couple of reasons, for one, I test for x<descendants.length
(rather than setting something such as len=descendants.length
up front, and testing against that) on every iteration as I'm pushing on to the stack in the second for loop.
First, usage:
let unPersonalizable = matchingDescendants(this, /a.checkimprintfiinformation$/, {first: true});
Implementation:
function matchingDescendants(vm, matcher, options) {
let descendants = vm.$children;
let descendant;
let returnFirst = (options || {}).first;
let matches = ;
for (let x=0; x<descendants.length; x++) {
descendant = descendants[x];
if (matcher.test(descendant.$vnode.tag)) {
if (returnFirst) {
return descendant;
}
else {
matches.push(descendant);
}
}
for (let y=0, len = descendant.$children.length; y<len; y++) {
descendants.push(descendant.$children[y]);
}
}
return matches.length === 0 ? false : matches;
}
add a comment |
You don't necessarily need $refs
, in fact sometimes they are not feasible if you have deeply nested components. I've found this Q&A several times while searching, but finally decidedly to implement my own solution since I run into this situation pretty frequently. Don't balk at the old-school for loops, they are necessary for a couple of reasons, for one, I test for x<descendants.length
(rather than setting something such as len=descendants.length
up front, and testing against that) on every iteration as I'm pushing on to the stack in the second for loop.
First, usage:
let unPersonalizable = matchingDescendants(this, /a.checkimprintfiinformation$/, {first: true});
Implementation:
function matchingDescendants(vm, matcher, options) {
let descendants = vm.$children;
let descendant;
let returnFirst = (options || {}).first;
let matches = ;
for (let x=0; x<descendants.length; x++) {
descendant = descendants[x];
if (matcher.test(descendant.$vnode.tag)) {
if (returnFirst) {
return descendant;
}
else {
matches.push(descendant);
}
}
for (let y=0, len = descendant.$children.length; y<len; y++) {
descendants.push(descendant.$children[y]);
}
}
return matches.length === 0 ? false : matches;
}
add a comment |
You don't necessarily need $refs
, in fact sometimes they are not feasible if you have deeply nested components. I've found this Q&A several times while searching, but finally decidedly to implement my own solution since I run into this situation pretty frequently. Don't balk at the old-school for loops, they are necessary for a couple of reasons, for one, I test for x<descendants.length
(rather than setting something such as len=descendants.length
up front, and testing against that) on every iteration as I'm pushing on to the stack in the second for loop.
First, usage:
let unPersonalizable = matchingDescendants(this, /a.checkimprintfiinformation$/, {first: true});
Implementation:
function matchingDescendants(vm, matcher, options) {
let descendants = vm.$children;
let descendant;
let returnFirst = (options || {}).first;
let matches = ;
for (let x=0; x<descendants.length; x++) {
descendant = descendants[x];
if (matcher.test(descendant.$vnode.tag)) {
if (returnFirst) {
return descendant;
}
else {
matches.push(descendant);
}
}
for (let y=0, len = descendant.$children.length; y<len; y++) {
descendants.push(descendant.$children[y]);
}
}
return matches.length === 0 ? false : matches;
}
You don't necessarily need $refs
, in fact sometimes they are not feasible if you have deeply nested components. I've found this Q&A several times while searching, but finally decidedly to implement my own solution since I run into this situation pretty frequently. Don't balk at the old-school for loops, they are necessary for a couple of reasons, for one, I test for x<descendants.length
(rather than setting something such as len=descendants.length
up front, and testing against that) on every iteration as I'm pushing on to the stack in the second for loop.
First, usage:
let unPersonalizable = matchingDescendants(this, /a.checkimprintfiinformation$/, {first: true});
Implementation:
function matchingDescendants(vm, matcher, options) {
let descendants = vm.$children;
let descendant;
let returnFirst = (options || {}).first;
let matches = ;
for (let x=0; x<descendants.length; x++) {
descendant = descendants[x];
if (matcher.test(descendant.$vnode.tag)) {
if (returnFirst) {
return descendant;
}
else {
matches.push(descendant);
}
}
for (let y=0, len = descendant.$children.length; y<len; y++) {
descendants.push(descendant.$children[y]);
}
}
return matches.length === 0 ? false : matches;
}
edited Dec 19 '17 at 16:18
answered Dec 19 '17 at 15:06
George JemptyGeorge Jempty
7,0361161132
7,0361161132
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.
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%2f35769139%2fvue-js-children-by-component-name%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