Nested v-for in vuejs for accordian data

Question

I am building a small application on VueJS 2.5.17 where I am having nested accordion data which I need to display through click events, I have a hierarchy of Root -> Roles -> Specialisation -> withRoles .... and so on. I am trying to get child elements on every click of their respective parents.

Following is my HTML Code:

<div class="panel-group" id="accordion1" v-for="items in accordianData">

    <div class="panel my-panel-warning">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a style="color: #000; font-size: 14px" data-toggle="collapse" data-parent="#accordion1" :href="'#'+items.id">DOCUMENTED RELATIONSHIPS ({{count}})</a>
            </h4>
        </div>
        <div :id="items.id" class="panel-collapse collapse">
            <div class="my-panel-body">
                <div class="my-panel-body">
                    <div class="panel-group" :id="items.id" >
                        <div class="panel my-panel-warning" v-for="child1 in roles">
                            <div class="panel-heading">
                                <a data-toggle="collapse" :data-parent="'#'+items.id" :id="'child'+child1.id" :href="'#role'+child1.id" @click="getSpecialisation(child1.id, child1.name)">{{child1.name+" (0)"}}</a>
                            </div>
                            <div class="my-panel-body">
                                <div :id="'role'+child1.id" class="panel-collapse collapse">
                                    <div class="panel my-panel-warning" v-if="child1.id === child2.parent_id" v-for="child2 in specialisations[child1.name]">
                                        <div class="panel-heading">
                                            <a data-toggle="collapse" :data-parent="'#role'+child1.id" :id="'child2'+child2.id" :href="'#spec'+child2.id" @click="getWithRoles(child2.id)">{{child2.name+" (0)"}}</a>
                                        </div>
                                        <div class="my-panel-body">
                                            <div :id="'spec'+child2.id" class="panel-collapse collapse">
                                                <div class="my-panel-body">
                                                .
                                                .
                                                .
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And calling following function in my methods:

getSpecialisation(id, name) {
    axios.get('specialisations?company_id='+this.company_id+'&role_id='+id, {headers: getHeader()}).then(response => {
        if(response.status === 200)
        {
            this.specialisations[name] = response.data.specialisations

        }
    })
},

But some how I am unable to display the data. Previously I tried v-for="child2 in specialisations" and in response I did this.specialisations = response.data.specialisations I was getting all similar child element for all parents I know this is wrong but just wanted to inform that I was getting data and my accordion was displaying child elements, but once I did according to above method getSpecialisation mentioned, I am unable to display the data.

I can see my data in vue console:

Suggest me a better way for this.

Thanks

tony19 · Accepted Answer · 2022-07-16 00:25:16Z

1

Instead of this.specialisations[name] = response.data.specialisations try:

Vue.set(this.specialisations, name, response.data.specialisations)

That should trigger Vue's change-detection.

Ps. When you see lots of nesting, this might be good time to split a big component up into smaller components.

edited Jul 16, 2022 at 0:25

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 9, 2018 at 19:57

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested v-for in vuejs for accordian data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related