Nested Vue components with counts of direct children and nested children

You pass data up the chain by using $emit...

Child:

<input @input="$emit('dothing', 'Simple String Value Here')">

Parent:

<MyComponent @dothing="executeThisMethod"/>

methods: {
    executeThisMethod(simpleStringValue) {
        console.log(simpleStringValue);
    }
}

Alternately, you pass data down using props.

If you're wanting to build this counting thing... I would strongly recommend watch The Net Ninja's YouTube video series on VueX and implementing a store you can simply increment each thing... then have access to it wherever you need.

https://www.youtube.com/watch?v=BGAu__J4xoc

@fylzero I'm trying to do it when the components are initialized instead of using VueX.

• Child initialized (mounted hook) = increment counter and bubble up to the parent.
• Parent =increment it's own counter and bubble up to it's parent recursively..
• and so on.

I haven't been able to get it to work though.

I have no solution to propose on the vue side, as I never had this problem, but if you have control over the backend, the "initial" counting problem might be better solved server side, in the database query (or at the backend application layer if you really want to...). Aggregates are a problem solved more than efficiently in SQL. Depth could also be computed backend side.

Then the problem in the front end is way simpler, as you only have to keep in sync the counts, which happens to be easy to bubble up (just re-emit it on the deleted/added event handler at each level).

I realise this isn't a direct solution for what you want to achieve, but it might be an alternative worth exploring, depending on your sql table structure and proefficiency.

Have you looked at any of the nested set packages for this sort of thing.

I usually like restricting levels to so many, code can really get out of hand.

One example I wrote a pedigree program, some of the dogs that went way back, their progeny report ( reverse pedigree) on just 6 Generations were in the hundreds of pages if you were going to print it out.

Later I changed it over to Just 4 generation and if more detail was needed made name clickable to pull up a four generation on that dog.

So good logic and organization in this nesting really comes in handy.

@connecteev You should count them on initialize and pass them to a VueX store. It will make wiring this much easier.

That said... you can take what I posted about emits and props and use that to wire your data. You already know where to count the items at. All you have to do is wire the data.

Go forth and good luck!

I made a simplified version to propose a solution:

Here as a parent component calling the tree roots:

<template>
    <div>
        <MyTree v-for="item in records" :key="item.id" :item="item" />
    </div>
</template>

<script>
import MyTree from './MyTree';

const FIXTURE = [
    {
        id: 1,
        children: [
            {
                id: 2,
                children: [{id: 3}, {id: 4}, {id: 5}],
            },
            {
                id: 6,
                children: [
                    {id: 7},
                    {id: 8, children: [{id: 9}, {id: 10}]},
                ],
            },
        ],
    },
    {
        id: 11,
        children: [
            {id: 12, children: [{id: 13}, {id: 14}, {id: 15}]},
            {id: 16, children: [{id: 17}]},
            {id: 18},
        ],
    },
];

export default {
    components: {MyTree},

    data() {
        return {
            records: FIXTURE,
        };
    },
};
</script>

And here is the tree component:

<template>
    <div>
        <div style="border: 1px solid black; padding: 5px;" :style="offset">
            id: {{ item.id }}
            // depth: {{ depth }}
            // direct: {{ direct }}
            // children: {{ childrenCount }}
        </div>

        <template v-if="item.children">
            <MyTree
                v-for="record in item.children"
                :key="record.id"
                :item="record"
                :depth="depth + 1"
                @born="handleBorn()" />
        </template>
    </div>
</template>

<script>
const COLORS = [
    'white',
    'lightgray',
    'lightblue',
    'lightcyan',
    'lightskyblue',
    'lightpink',
];

export default {
    // MUST give a name in recursive components
    // https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components
    name: 'MyTree',

    props: {
        item: {type: Object, required: true},
        depth: {type: Number, default: 0},
    },

    data() {
        return {
            childrenCount: 0,
        };
    },

    computed: {
        direct() {
            if (Array.isArray(this.item.children)) {
                return this.item.children.length;
            }

            return 0;
        },

        offset() {
            return {
                'margin-left': (this.depth * 20) + 'px',
                'background-color': COLORS[this.depth % COLORS.length],
            };
        },
    },

    mounted() {
        this.$emit('born');
    },

    methods: {
        handleBorn() {
            this.childrenCount++;
            this.$emit('born');
        },
    },
};
</script>

EDIT

Added screenshot:

@fylzero @jlrdw @lelectrolux @rodrigo.pedra thank you so much for sharing your thoughts...

I spent a lot of time thinking about all your answers and experimenting....but I really wanted a front-end solution (to save the burden of having to maintain separate counts on the back-end side).

There's no denying that @rodrigo.pedra 's answer nailed it! Thank you!