Question

我正在VueJS 2.5.17上构建一个小型应用程序，在该应用程序中我需要嵌套嵌套的手风琴数据，这些数据需要通过单击事件显示，我的层次结构为Root -> Roles -> Specialisation -> withRoles ....，依此类推。我试图在父母各自的每次点击中获得子元素。

以下是我的HTML代码：

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

并在我的方法中调用以下函数：

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

        }
    })
},

但是有些我无法显示数据。以前，我尝试过v-for="child2 in specialisations"，但作为回应，我做了this.specialisations = response.data.specialisations，我正在为所有父母获取所有相似的子元素，我知道这是错误的，但只是想告知我正在获取数据，而我的手风琴正在显示子元素，但是一旦按照上述方法getSpecialisation完成操作，我将无法显示数据。

我可以在vue控制台中查看我的数据：

为我建议一个更好的方法。

谢谢

Answer 1

代替this.specialisations[name] = response.data.specialisations试试：

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

那应该触发Vue's change-detection。

Ps。当您看到大量嵌套时，这可能是将一个大型组件拆分为多个较小组件的好时机。

在vuejs中嵌套v-for中的手风琴数据

1 个答案: