Question

我真的很需要您的帮助，这是我工作的任务。我必须以数据驱动的方式渲染侧边栏，并且应该创建使用b-collapse进行渲染的逻辑（也许除了使用b-collapse之外，还有更好的方法）。问题在于使用v-for指令有条件地渲染“ b-collapse”。

目标：如果在“第二级”中存在“选项”，则b折叠应仅在单击的“ b-list-group-item”中呈现。

在v-if指令中，我做了以下事情：v-if =“ typeof option2.options！='undefined'”。它部分地有所帮助，但是现在当我单击其他“ b-list-group-item”时，无论我的“ option1.subCategory”（SECOND LEVEL）对象中缺少对象的“ options”数组如何，都会呈现“ b-collapse”

侧边栏的视觉结构：

Sidebar:
option1.title
   option2.title(if "options" exists, b-collapse is rendered here)
   option2.title(lack of "options", b-collapse doesn't render here )
   option2.title(same logic as above) 
option1.title
   option2.title(if "options" exists, b-collapse is rendered here)
   option2.title(lack of "options", b-collapse doesn't render here )
   option2.title(same logic as above)

模板：

<b-list-group :key="option1.id" v-for="option1 in category">
  FIRST LEVEL
  <b-list-group-item ><span>{{ option1.title }}</span></b-list-group-item>
  SECOND LEVEL
  <b-list-group-item v-b-toggle.collapse-1 @click.stop="toShow" class="subCategory" role="button" :key="option2.id" v-for="option2 in option1.subCategory">
   <!-- Подкатегории -->
   <a>{{ option2.title }}</a>
   <b-collapse id="collapse-1" v-if="typeof option2.options != 
     'undefined'">
     <b-list-group class="d-md-none d-lg-none d-sm-block" >
       <ul class="list-group">
         THIRD LEVEL
         <router-link class="list-group-item" to="formProperty" 
           :key="option3.id" v-for="option3 in option2.options">
           <!-- Опций -->
           {{ option3.title }}
         </router-link>         
       </ul>
     </b-list-group>
   </b-collapse>      
  </b-list-group-item>
</b-list-group>

目标数据：

data(){
 return {
   category : [
   {
      "title" : "ФИЗ.ЛИЦАМ",
      subCategory: [
        {
          "title"  : "НАЛОГИ",
          "options": [
            { "title" : 'НАЛОГ НА ИМУЩЕСТВО' },
            { "title" : 'НАЛОГ НА ИМУЩЕСТВО(ПЕНИ)' },
            { "title" : 'ЗЕМЕЛЬНЫЙ НАЛОГ' },
            { "title" : 'ЗЕМЕЛЬНЫЙ НАЛОГ(ПЕНИ)' },
            { "title" : 'СОЦИАЛЬНЫЙ НАЛОГ' },
            { "title" : 'СОЦИАЛЬНЫЙ НАЛОГ(ПЕНИ)' },
            { "title" : 'ИПН НЕОБЛАГАЕМЫЙ' },
            { "title" : 'ИПН НЕОБЛАГАЕМЫЙ(ПЕНИ)' },
            { "title" : 'ИПН ОБЛАГАЕМЫЙ' },
            { "title" : 'ИПН ОБЛАГАЕМЫЙ(ПЕНИ)' }
          ]
        },
        {
          "title": "ШТРАФЫ",
          "id": 19,
          "url": "/form/19"
        }
      ]
   }
}

我的输出：当我单击“选项”不存在的其他“ b-list-group-item”时，b折叠会在“ options”所在的b-list-group-item中呈现。预期的输出：仅在存在“选项”的b-list-group-item之外才显示b折叠

如何用“ v-for”渲染“ b-collapse”？

0 个答案: