v-for при условии v-if, v-else не работает, l oop дубликат - PullRequest
Новая
       9

v-for при условии v-if, v-else не работает, l oop дубликат

0 голосов
/ 08 апреля 2020

Код, написанный на языке Vue, с использованием Element-ui framework,

Если один объект содержит что-то, он отображается, если нет кнопки меню, отключить .

Выходные данные должны быть такими:

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 условие истинно, для l oop показывает, должен ли он отображаться, а не определенный элемент, который проходит условие.

Если массив содержит что-то, массив и его дочерний дисплей. 

<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 , который имеет меню второго уровня.

пожалуйста, помогите мне !!! Спасибо.

1 Ответ

1 голос
/ 09 апреля 2020

Вы можете динамически установить свойство 'disabled' с помощью v-bind:disabled (сокращение: :disabled). Тогда вам не нужно дублировать циклы или делать тасование 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>

Не рекомендуется использовать v-if и v-for для одного элемента.

...