Question

我正在Vuejs中构建一个小型应用程序，在那里我手风琴可以从每次单击事件中获取数据。我的整个代码都位于：

在这种情况下，我有一个通过单击每个手风琴数据来调用的函数。我能够适当地获得一级树，如下所示：

所以在这里您可以看到我有一个父级Consultant，然后有一个子元素Design Architect，然后又有一个子级Consultant，因为从api收到的响应有4个，所以该值集是错误的数据集，并且仅显示一个数据集。为了进行调试，我做了console.log(this.withRoles[name])，在控制台中，我得到了4个值：

您可以看到上面的console.log(this.specialisations[name])，第二个是console.log(this.withRoles[name])，我不知道我错过了什么，这就是为什么我将整个代码放在上面的链接中，元素来自此代码：

<div class="panel my-panel-warning" v-if="child3.id === child2.parent_id" v-for="child3 in withRoles[child2.name]">
    <div class="panel-heading">
        <a v-if="child3.parent_id==null" style="color: #ff4d0e; font-weight: bold" data-toggle="collapse" :data-parent="'#child2'+child3.id" :id="'child3'+child3.id" :href="'#with_role'+child3.id" @click="getWithSpecialisation(child3.id, child2.id, child3.name)">{{"With "+child3.name+" (0)"}}</a>
        <a v-else style="color: #0c2a52; font-weight: bold" data-toggle="collapse" :data-parent="'#child2'+child3.id" :id="'child3'+child3.id" :href="'#with_role'+child3.id" @click="getWithSpecialisation(child3.id, child2.id, child3.name)">{{"With "+child3.name+" (0)"}}</a>
    </div>
    <div class="my-panel-body">
        <div :id="'with_role'+child3.id" class="panel-collapse collapse">
            <div class="my-panel-body">
                <div class="panel my-panel-warning" v-for="child4 in withSpecialisations[child3.name]">
                    <div class="panel-heading">
                        <a v-if="child4.parent_id==null" style="color: #ff4d0e; font-weight: bold" data-toggle="collapse" :data-parent="'#child3'+child4.id" :id="'child4'+child4.id" :href="'#with_spec'+child4.id" @click="table(child4.id, child2.id, child4.name)">{{"With "+child4.name+" (0)"}}</a>
                        <a v-else style="color: #0c2a52; font-weight: bold" data-toggle="collapse" :data-parent="'#child3'+child4.id" :id="'child4'+child4.id" :href="'#with_spec'+child4.id" @click="table(child4.id, child2.id, child4.name)">{{"With "+child4.name+" (0)"}}</a>
                    </div>
                    <div class="my-panel-body">
                        .
                        .
                        .
                        .
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

以及获取数据的函数：

getWithRoles(id, name) {
    axios.get('Conxn/api/industry-relationship/sub-roles?company_id='+this.company_id+'&role_id='+id, {headers: getHeader()}).then(response => {
        if(response.status === 200)
        {
            Vue.set(this.withRoles, name, response.data.with_roles)
            console.log(this.withRoles[name])
        }
    })
},

并且我的代码对于下一棵树也很好用，即：

我使用的是相同的概念，但不确定在哪里犯错，请帮我解决这些问题。

谢谢

Vuejs中的动态手风琴数据

0 个答案: