v-if/else branches must use unique keys.vue(29)_程序员鱼丸的博客-程序员秘密

技术标签: 前端  vue.js  javascript  

问题描述

vue3 + vite 使用 v-if 遍历菜单时,报错如下

v-if/else branches must use unique keys.vue(29)

原因分析:

vue3 中 if 与 else 的 key 不能相同


解决方案:

  <template v-for="(menu, index) in menuList" :key="menu.menuId">
    <a-sub-menu v-if="menu.children && menu.children.length" :key="menu.menuId">
      <template #title>{
   { menu.name }}</template>
      <ReSubMenu :menuList="menu.children" />
    </a-sub-menu>
    <a-menu-item v-else :key="menu.menuId + 1">
      <span>{
   { menu.name }}</span>
    </a-menu-item>
  </template>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Fine_Cui/article/details/124906140

智能推荐

@Scheduled多定时任务,重叠执行。_曹牛牛的博客-程序员秘密

@Scheduled如果有两个定时任务,定时任务重复时,只有一个可以执行。如下import org.springframework.scheduling.annotation.Scheduled;import org.springframework.stereotype.Component;import java.time.LocalDateTime;@Componentpublic class MyScheduled { @Scheduled(cron = "0/5 * * *

铁威马NAS用户权限的设置_weixin_33806509的博客-程序员秘密

通过灵活的用户管理,您可以为家庭或者企业的每个成员创建用户账户。您可以管理每个用户的权限,如共享文件夹的访问权限或者存储的配额。1.登录铁威马TOS系统;2.控制面板--用户;3.选择要设置的用户,点击编辑;4.点击用户权限,可为用户设置相对应的共享文件夹的访问权限;转载于:https://blog.51cto.com/14382576/2407442...

启动redis本地服务_ms_gcc的博客-程序员秘密

首先是安装环境 windows版redis:https://github.com/MSOpenTech/redis/releases linux版redis:http://redis.io/download我的电脑是windows版本接下来windows为例,现在我们的环境安装好了,接下来是要启动redis服务,启动要在两个dos界面输入命令,为了方便我将这两条命令做成批处理, start r

用ATL开发COM组件(一个完整例子)_benwdm的博客-程序员秘密

一个自己写的用ATL开发COM组件的例子,因为自己不懂C语言,所以写的磕磕碰碰,为了以后有个参考,所以就存到博客里来。 **************菜鸟习作,高手飘过*************...

C++ 指针 new delete_ERROR无限的博客-程序员秘密

///C++指针:/// *操作符两边的空格是可选的。传统的,C程序员使用这种格式:int *ptr;这强调/// *ptr是一个int型的值,而C++程序员一般用这种格式:int* ptr;这强调的是:int*/// 是一种类型,是指向int的指针/// int* p1,p2;将创建一个指针p1,和一个整型的p2。对于每个指针变量名,都需要使/// 用一个*/// 在C+

R在安装units时出现错误,提示未安装“udunits”,安装udunits后提示ERROR: configuration failed for package ‘udunits2’_gavin_cdc的博客-程序员秘密

2018.9.10​configure: error: in `/tmp/Rtmp79GfU8/R.INSTALL56a968302bf8/units':configure: error:--------------------------------------------------------------------------------libudunits2.so n...

随便推点

C++数据结构与STL--双向循环链表(实现自定义iterator类)_learn123_net的博客-程序员秘密

双向循环链表核心代码图解:节点类#ifndef node_H#define node_Htemplateclass node{public:node *pre;  //上一节点指针node *next;//下一节点指针T val;node():val(T()),pre

HTML DOM 基础_KM_hz的博客-程序员秘密

DOM document object module 文档对象模型DOM是W3C的的标准,定义了访问XML,HTML文档的标准,分为三个部分:1.核心DOM,针对任何结构化文档的标准。2.XML DOM3.HTML DOMHTML DOM是如何对HTML元素进行操作的标准。DOM将HTML文档定义成树结构。也就是 文档由根元素+子元素组成。

对于私域流量你怎么看?_萃见的博客-程序员秘密

大家都知道流量分为私域流量和公域流量。今天萃见就和大家聊聊私域流量。做流量是为了什么呢?肯定是为了赚钱嘛!但是做流量,有一点很重要你知道是什么吗?就是流量要触达才是有效的。你说你微信好友多,但是朋友圈据数据显示只有10%不到的人才能看到,针对这种情况就可以多发几条。或者把其他平台的账号给粉丝,让他们去看,增加这个触达率。只有触达,才可能促成后期的变现。所有的流量变现都是建立在一次或者多次触达的基础上。例如说抖音这个平台,你的粉丝只是你的粉丝,下次你发的作品几乎不会展现给你的粉丝看。所以粉丝只是你

java实训目标,手撕面试官_普通网友的博客-程序员秘密

架构筑基大家都知道,性能一直是让程序员比较头疼的问题。当系统架构变得复杂而庞大之后,性能方面就会下降,如果想成为一名优秀的架构师,性能优化就是你必须思考的问题。所以性能优化专题从JVM底层原理到内存优化再到各个中间件的性能调优,比如Tomcat调优,MySQL调优等,让你洞悉性能本质,全面认识性能优化,不再只是旁观者。高性能架构有了大牛的代码功底之后,接下来可以更好地学习分布式架构技术。从分布式架构原理,到分布式架构策略,再到分布式架构中间件,最后在加上分布式架构实战,让程序员可以在技术深度和技

python 文件/文件夹/目录操作_python 如何写 d盘指定路径_liangweibeijing的博客-程序员秘密

————————————————A.Python文件、文件夹的移动、复制、删除、重命名#文件、文件夹的移动、复制、删除、重命名#导入shutil模块和os模块import shutil,os#复制单个文件shutil.copy("C:\\a\\1.txt","C:\\b")#复制并重命名新文件shutil.copy("C:\\a\\2.txt","C:\\b\\121.txt")#复制整个目录(备份)shutil.copytree("C:\\a","C:\\b\\new_a")

Box2d教程及实例解析_RabbitLBJ的博客-程序员秘密

原文链接:http://gaohaijun.blog.163.com/blog/static/176698271201011289440243/注意: 本教程只适用于BOX2D 2.0以下版本,由于2.0版API的改动,所以有部分代码会并不适用.但是主要思想还是一样的. 一、 HelloWorld 开始之前,我假想你已经看过了HelloWorld的源代码,并看了

推荐文章

热门文章

相关标签