Find all the components associated with a specific name in Vue, even if they are nested within other components

Question

Find all the components associated with a specific name in Vue, even if they are nested within other components

One interesting feature in my app is the sidebar:

https://i.sstatic.net/7Z9IN.png

The code for the tree item component looks like this :

 <!-- tree item template -->
 <script type="text/x-template" id="tree-item-template">
    <div>
        <div>
            <user-card @toggle-supervisor="toggle" :user_info="item" :key="item.id_user"></user-card>
        </div>
        <div v-show="isOpen" v-if="isFolder" class="ml-3">
            <tree-item
            v-for="(child, index) in item.employees"
            :key="index"
            :item="child"
            ></tree-item>
        </div>
    </div>
</script>

This component has a nested component named user-card.

I am aiming to create an array containing all components with the name 'user-card', irrespective of nesting within other components.

This is required so that I can change the color of the name to blue when selected (clicked) and back to black when deselected.

I have discovered that using this.$children allows me to fetch a list of components within a component, but not all of them. Therefore, I am exploring if there is a way to retrieve a list of all elements based on their component name.

javascript vue.js vue-component

Answer 1

Answer №1

To easily gather all user cards in your Vue component, you can utilize the following code snippet:

        const children = this.$children.slice();
        const userCards = [];
        let currentChild;

        while (children.length > 0) {
          currentChild = children.shift();
          
          if (currentChild.$options.name === 'user-card') {
            userCards.push(currentChild);
          } else {
            const grandchildren = currentChild.$children.slice();

            for (let i = 0; i < grandchildren.length; i++) {
              children.push(grandchildren[i]);
            }
          }
        }

        // The "userCards" array now contains all user cards from the original component

Answer 2

To easily gather all user cards in your Vue component, you can utilize the following code snippet:

        const children = this.$children.slice();
        const userCards = [];
        let currentChild;

        while (children.length > 0) {
          currentChild = children.shift();
          
          if (currentChild.$options.name === 'user-card') {
            userCards.push(currentChild);
          } else {
            const grandchildren = currentChild.$children.slice();

            for (let i = 0; i < grandchildren.length; i++) {
              children.push(grandchildren[i]);
            }
          }
        }

        // The "userCards" array now contains all user cards from the original component

Find all the components associated with a specific name in Vue, even if they are nested within other components

Answer №1

Similar questions

What steps can be taken to avoid special characters in ion-input fields?

End the basic JavaScript slideshow after completing one rotation

What is the best way to execute fetch calls in sequence (A -> B -> C) within a React component?

Challenge with jQuery - updating closest HTML element not functioning as expected

Is there a way to automatically compress Express JS assets?

What steps can I take to ensure this conversion meets markup validation requirements?

It is not possible to utilize a JavaScript function once the script has been loaded through

SweetAlert2 not displaying properly in Ionic6 - troubleshooting the issue

Store a function as a variable in AngularJS

Refreshing Yii Dropdown List After Adding a New Item

When working with Vue.js, toggling the 'readonly' attribute of a textarea between true and false may not be effective

Angular proxy - Syntax error found in proxy configuration file: proxy.conf.json

How can we transfer parameters in JavaScript?

Regularly updating a book's interactive pages with turn.js technology

Adding an object to a document's property array based on a condition in MongoDB using Mongoose

Switch the view to a grid layout upon clicking

Utilize the keep-alive feature to cache a single route component dynamically

Learn how to navigate to a different page in vuetify after a successful password validation

Explore RxJs DistinctUntilChanged for Deep Object Comparison

Send a pair of values using a set of two parameters