javascript - v-for 在 v-if 条件下，v-else 不起作用，循环重复

Question

代码由Vue语言编写，使用Element-ui框架，

如果一个对象包含某些内容，则会显示该内容，如果不包含则禁用菜单按钮。

输出应该是这样的:

a、b(禁用)、c、d、e

但我的是这样的:

a、a(禁用)、b(禁用)、c(禁用)、d(禁用)、e(禁用)、c、d、e

如果 v-if 语句和 v-else-if 语句翻转，输出如下:

a(禁用)、b(禁用)、c(禁用)、d(禁用)、e(禁用)、b、a(禁用)、b(禁用)、c(禁用)、d(禁用)、e(禁用)、a(禁用)、b(禁用)、c(禁用)、d(禁用)、e(禁用)、a(禁用)、b(禁用)、c(禁用)、d(禁用)，e(禁用)

所以，我猜如果if-else条件成立，for循环显示是否必须显示，而不是通过条件的某个项目。

如果数组包含某些内容，则显示数组及其子数组。

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

     <el-submenu
          v-if="item.subCategories && item.subCategories.length <= 0"
          v-for="(item, index) in category.categories" :index="(index+1).toString()"
          :key="item.parentCategory.categoryId">

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

          <el-menu-item
               index="(index+1).toString()-(i+1).toString()"
               v-for="(child, i) in item.subCategories"
               :key="child.categoryId"
               @click="searchEventByCategory(item.parentCategory.categoryId, child.categoryId)">
                    {{ child.categoryName }}
          </el-menu-item>
     </el-submenu>

如果数组不包含任何内容，则无法单击菜单，当然它也没有子菜单。

     <el-submenu
          v-else-if="item.subCategories && item.subCategories.length > 0"
          disabled
          v-for="(item, index) in category.categories" :index="(index+1).toString()"
          :key="item.parentCategory.categoryId">

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

          <el-menu-item>
          </el-menu-item>

     </el-submenu>
</el-menu>

顺便问一下，如果对象不包含任何内容，是否有可能该对象显示为el-menu-item，这是独立的菜单项，而不是el-submenu有二级菜单。

请帮帮我!!!谢谢。

Answer 1

您可以使用v-bind:disabled(简写::disabled)动态设置“disabled”属性。那么您不需要重复 for 循环或进行任何 v-if 改组。

<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.