Question

我的移动视图中有一个侧边栏。我必须有条件地渲染b-collapse。条件是这样的：如果我的options对象数组中有subCategory个对象数组，则应渲染b-collapse。我的b-collapse在b-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"
              }
            ]
          }
        ]

Answer 1

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

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

1 个答案: