Vue.js $children by component name












15















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?










share|improve this question





























    15















    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?










    share|improve this question



























      15












      15








      15


      1






      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?










      share|improve this question
















      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 2 at 12:27









      Alex

      2,28233051




      2,28233051










      asked Mar 3 '16 at 10:12









      FlakxFlakx

      3822922




      3822922
























          5 Answers
          5






          active

          oldest

          votes


















          21














          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






          share|improve this answer





















          • 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



















          18














          You can use this property:



          this.$root.$children[0].$options.name


          For example:



          this.$root.$children.find(child => { return child.$options.name === "name"; });





          share|improve this answer


























          • 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



















          2














          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.






          share|improve this answer































            1














            this.$root.$children[0].constructor.name





            share|improve this answer





















            • 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



















            0














            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;
            }





            share|improve this answer

























              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
              });


              }
              });














              draft saved

              draft discarded


















              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









              21














              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






              share|improve this answer





















              • 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
















              21














              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






              share|improve this answer





















              • 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














              21












              21








              21







              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






              share|improve this answer















              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>






              share|improve this answer














              share|improve this answer



              share|improve this answer








              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 the ref attribute in the template like this: <details ref="detailsChild"></details>. vuejs.org/v2/api/#ref

                – thanksd
                Dec 19 '17 at 15:34














              • 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








              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













              18














              You can use this property:



              this.$root.$children[0].$options.name


              For example:



              this.$root.$children.find(child => { return child.$options.name === "name"; });





              share|improve this answer


























              • 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
















              18














              You can use this property:



              this.$root.$children[0].$options.name


              For example:



              this.$root.$children.find(child => { return child.$options.name === "name"; });





              share|improve this answer


























              • 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














              18












              18








              18







              You can use this property:



              this.$root.$children[0].$options.name


              For example:



              this.$root.$children.find(child => { return child.$options.name === "name"; });





              share|improve this answer















              You can use this property:



              this.$root.$children[0].$options.name


              For example:



              this.$root.$children.find(child => { return child.$options.name === "name"; });






              share|improve this answer














              share|improve this answer



              share|improve this answer








              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



















              • 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











              2














              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.






              share|improve this answer




























                2














                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.






                share|improve this answer


























                  2












                  2








                  2







                  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.






                  share|improve this answer













                  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.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Jan 2 at 12:17









                  ArminArmin

                  264




                  264























                      1














                      this.$root.$children[0].constructor.name





                      share|improve this answer





















                      • 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
















                      1














                      this.$root.$children[0].constructor.name





                      share|improve this answer





















                      • 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














                      1












                      1








                      1







                      this.$root.$children[0].constructor.name





                      share|improve this answer















                      this.$root.$children[0].constructor.name






                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      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














                      • 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











                      0














                      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;
                      }





                      share|improve this answer






























                        0














                        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;
                        }





                        share|improve this answer




























                          0












                          0








                          0







                          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;
                          }





                          share|improve this answer















                          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;
                          }






                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Dec 19 '17 at 16:18

























                          answered Dec 19 '17 at 15:06









                          George JemptyGeorge Jempty

                          7,0361161132




                          7,0361161132






























                              draft saved

                              draft discarded




















































                              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.




                              draft saved


                              draft discarded














                              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





















































                              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







                              Popular posts from this blog

                              Monofisismo

                              Angular Downloading a file using contenturl with Basic Authentication

                              Olmecas