时间戳

首页 > 解决方案 > VueJS - 基于 JSON 响应的嵌套手风琴

vue.js - VueJS - 基于 JSON 响应的嵌套手风琴

问题描述

下面使用基于 JSON 响应的 vuejs 组件逻辑。

我对这个 VueJS 框架很陌生。根据我下面的代码，第一级 JSON 响应值呈现良好。但，

  1. 嵌套手风琴不起作用->在“值”数组中。
  2. 嵌套手风琴仅在每个项目都存在“值”数组时才需要显示。否则隐藏嵌套。3

{
    "filters":[
       {          
        "title":"itemcategory",
          "items":[
             {
                "label":"Modular Item",
                "value":"material",
                "count":1,
                "type":"accordion"
             }
          ]
       },
       {
       "title":"itemelements",
          "items":[
             {
                "label":"Item 1",
                "value":"item1",
                "count":2,
                "type":"accordion",
                "values":[
                   {
                      "label":"Item 1.1",
                      "value":"item1.1",
                      "count":1
                   }
                ]
             },
             {
                "label":"Item2",
                "value":"item2",
                "count":4,
                "type":"accordion",
                "values":[
                   {
                      "label":"Item 2.1",
                      "value":"item2.1",
                      "count":4
                   },
                   {
                      "label":"Item 2.2",
                      "value":"item2.2",
                      "count":3
                   }
                ]
             }
          ]
       }
    ]
}
.card-body
    template(v-for='item in items')
        .form-group.mb-0(v-if='item.type && item.type=="accordion"')
            .main-list--container
                .main-title.card-header(:id='"accordion-" + item.value')
                    h2.mb-0
                        button.btn.btn-link.no-padding(type='button' data-toggle='collapse', :data-target='"#test-" + item.value')
                            .form-group.mb-0
                                .Checkbox
                                    input.styled-checkbox(:id='"parent-" + item.value' type='checkbox', :value='"parent-" + item.value')
                                    div.Checkbox-visible
                                .checkbox-txt {{item.label}}
                                i.fa.fa-chevron-right     
                                             
                .collapse.test-module-listing(:id='"test-" + item.value', :aria-labelledby='"accordion-" + item.value')
                    .form-group
                        .Checkbox
                            input.styled-checkbox(:id='"child-" + item.value', type='checkbox', :value='"child-" + item.value')
                            .Checkbox-visible
                        .checkbox-txt.ss {{item.label}}
                        .filter-nos
                            .wrap {{item.count}}

标签： vue.js

解决方案

只需使用嵌套v-for的 on item.values，并有条件地显示它v-if='item.values'：

.card-body
    template(v-for='item in items')
        //...

        ul(v-if='item.values')
            li(v-for='subItem in item.values')
                .wrap {{subItem.value}}

推荐阅读