[Vuejs]-V-for under v-if condition, v-else doesnt work, loop duplicate

by

1👍

You can set the ‘disabled’ property dynamically with v-bind:disabled (shorthand: :disabled). Then you don’t need to duplicate for loops or do any v-if shuffling.

<el-menu
     :default-active="activeIndex"
     mode="horizontal"
     @select="handleSelect">

     <el-submenu
          v-for="(item, index) in category.categories" 
          :index="(index+1).toString()"
          :key="item.parentCategory.categoryId"
          :disabled="item.subCategories && item.subCategories.length <= 0"> // set disabled property dynamically if this statement is true

          <template slot="title">
               {{ item.parentCategory.categoryName }}
          </template>

          // If item.subcategories doesn't exist or has no items, this for loop won't render anything.
          <el-menu-item
                v-for="(child, i) in item.subCategories"               
                :index="(index+1).toString()-(i+1).toString()"
                :key="child.categoryId"
                @click="searchEventByCategory(
                item.parentCategory.categoryId,child.categoryId
                )">
                    {{ child.categoryName }}
          </el-menu-item>
     </el-submenu>
</el-menu>

It’s not advised to use v-if and v-for on the same element.

👤Excalibaard

Leave a comment