如何使用v-if指令实现b折叠?

时间:2019-08-16 05:41:57

标签: twitter-bootstrap vuejs2

我的移动视图中有一个侧边栏。我必须有条件地渲染b-collapse。条件是这样的:如果我的options对象数组中有subCategory个对象数组,则应渲染b-collapse。我的b-collapseb-list-group-item

渲染的v-for内部

我试图以这种方式访问​​选项: v-if="category[0].subCategory[0].options"

模板:

<b-list-group :key="option1.id" v-for="option1 in category">
        <b-list-group-item ><span>{{ option1.title }}</span></b-list-group-item>
        <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="category[0].subCategory[0].options">
            <b-list-group class="d-md-none d-lg-none d-sm-block" :key="option1.id" >
              <ul class="list-group" :key="option2.id" v-for="option2 in option1.subCategory">
                <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>

数据:

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

1 个答案:

答案 0 :(得分:1)

使用v-if="option2.options"代替v-if="category[0].subCategory[0].options"