Vue3.x v-for与v-if不能混用, 可是又不能删除v-if, 因为还有v-else

创建项目是: vue create h1, 项目使用了element-ui插件.

创建了一个单文件组件: ./components/Menu.vue:


<el-menu :default-active=“activeIndex” class=“el-menu-demo” mode=“horizontal”
@select=“handleSelect” :collapse-transition=“false”
>

{{item.title}}
{{v2.title}}

{{item.title}}



export default {
    data: function() {
        return {
            activeIndex: '1',
            list: [
                {
                    index: '1',
                    title: 'Home'
                },
                {
                    index: '2',
                    title: 'Out Products',
                    list: [
                        {
                            index: '2-1',
                            title: '选项1'
                        },
                        {
                            index: '2-2',
                            title: '选项2'
                        },
                        {
                            index: '2-3',
                            title: '选项3',
                        },
                        {
                            index: '2-4',
                            title: '选项4',
                            list: [
                                {
                                    index: '2-4-1',
                                    title: '选项2.4.1',
                                },
                                {
                                    index: '2-4-2',
                                    title: '选项2.4.2',
                                },
                                {
                                    index: '2-4-3',
                                    title: '选项2.4.3',
                                }
                            ]
                        },
                    ]
                },
                {
                    index: '3',
                    title: 'Exhibition Notice'
                },
                {
                    index: '4',
                    title: 'About Us'
                },
                {
                    index: '5',
                    title: 'Contact Us'
                }
            ]
        }
    },

    props: [
        
    ],

    computed: {
        
    },

    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath)
        }
    }
}
</script>

<style lang="less" scoped>
    
</style>

但是编译时提示v-for与v-if不能混合, 替换方案是使用computed 方式, 但是我v-if中的东西是v-for中的item, 不是list本身, 所以computed方式似乎不怎么好写, 我要怎么改呢?

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose">

    <template v-for="(item, index) in list">
      <el-submenu v-if="item.list && item.list.length" :key="item.title" :index="`${index}`">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item-group v-for="(_item, _index) in item.list" :key="_item.title">
          <el-menu-item :index="`${index}-${_index}`">{{ _item.title }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item v-else :key="item.title" :index="`${index}`">
        <i class="el-icon-menu"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '1',
      list: [
        {
          index: '1',
          title: 'Home'
        },
        {
          index: '2',
          title: 'Out Products',
          list: [
            {
              index: '2-1',
              title: '选项1'
            },
            {
              index: '2-2',
              title: '选项2'
            },
            {
              index: '2-3',
              title: '选项3',
            },
            {
              index: '2-4',
              title: '选项4'
            },
          ]
        },
        {
          index: '3',
          title: 'Exhibition Notice'
        },
        {
          index: '4',
          title: 'About Us'
        },
        {
          index: '5',
          title: 'Contact Us'
        }
      ]
    }
  }
}
</script>

1 Like

谢谢,你的回复代码质量很高啊, 坡为佩服!
我后来的方案中也确实是用了template这种虚拟标签将v-for分离出去才搞定的.
另外问下,我发代码时, 这种东西预览时都没有了, 就如我上面发的那样, 不知道你是怎么发出来的, 竟然还能原样保留, 我用的是"</>" 这个东西发代码的

markdown语法

感谢。 markdown语法应该是要编辑器支持的吧?最近才开始学了点markdown的语法, 感觉自己好落伍,也挺好用的!

emmmm 官方文档里有说到 v-forv-if 一起用的时候需要注意什么,这里涉及到这两者的优先级问题,于及如何优雅地处理这个情况。
很多情况下可能也建议你使用 template 将你复杂的逻辑处理分成多层来处理

啥时候 发的 3.x ?

英文输入模式下,点击键盘左上角的波浪线,三下,

换行后,写代码

换行后,点击波浪线三下,结束

多谢, 这是markdown语法, 学过一点