vue2+elui报错[Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞

于 2024-03-23 08:41:38 发布
阅读量1k 收藏
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sfumato/article/details/136958135
版权
文章描述了一个在使用Vue.js时遇到的问题，即在点击表单重置按钮后，多选框的值虽然被重置但没有正确显示默认选项。问题源于多选框的初始值被设置为Array(n)且各项赋值为undefined，而非预期的[]。解决方案是将多选框的初始值改为[]。
摘要由CSDN通过智能技术生成

场景

我没有使用transition-group，很明显是一个内部错误。错误触发时机是我选择了多选框的内容，点击表单重置按钮，报错。虽然重置后多选框的值都没了，但是并未显示【请选择】字段，说明value是有问题的

原因分析

表单的属性初始值都为undefined,通过watch深度监听表单对象发现，多选框对应的属性值并为重置为undefined,而是Array(n),并且各项赋值为undefined，导致报错

解决

将多选框初始值赋值为[],而不是undefined

sfumato
关注
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
Vue2+El-Menu 实现路由跳转及当前项的设置方法实例 Vue.js 是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 vue2+...
el-select报错：vue.esm.js?5cd5:5105 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞；无法选中
qq_45327886的博客
04-10 4209
children must be keyed: ＜ElTag＞；el-select无法选中
ElementUI el-select绑定对象报错<transition-group> children must be keyed: <ElTag>的解决方案
HermitSun的博客
02-05 2万+
症状是选择的时候会同时选取所有的选项，同时控制台报错<transition-group> children must be keyed: <ElTag>。 简而言之，是因为没有指定el-select的value-key属性，或者没有正确指定el-select的value-key属性。按照官网的说法： 如果 Select 的绑定值为对象类型，请务必指定 value-key ...
关于vue中 select多选 ＜transition-group＞ children must be keyed: ＜ElTag＞报错问题
---
07-27 7844
查询出结果说是没有给<el-select>设置value-key="id"，这个id为v-for中item唯一的值，，但是我这边添加了后还是报错，后来知道是因为之前设置的枚举值被删除了，导致获取不到这个枚举值，因此请求后台传递这个被删除的枚举值时才报此错误。 处理方案是设置if条件，当这个回显枚举值为undefined时过滤掉，此问题是后台删改数据导致，前端此法可以过滤报错问题，但不是在根本上解决问题 以上理解也可能是错误的，记录备忘。。。 ...
[Vue warn]: <transition-group> children must be keyed: <ElTag>
weixin_34319999的博客
12-17 1万+
如果你也像我一样，在select上面需要绑定整个返回的数据值，但是展示只显示一些name,并且可以多选。那么你可能会遇到我这个一样的问题。 el-select绑定值为对象时，报错[Vue warn]: <transition-group> children must be keyed: <ElTag>解决方法： &...
【vue warn】报错日记之＜transition-group＞ children must be keyed: ＜ElTag＞
weixin_53594144的博客
05-29 7684
​​​​​问题描述 vue + element，在列表中切换类型时控制台一直warn警告...<transition-group> children must be keyed: <ElTag>... 带着警告信息去百度搜了下问题，呈现的结果里多数指向说是因为el-select需写value-key属性，于是果断给el-select加上value-key，然而问题没解决？ 此外还衍生一个小问题，如下图示，困扰了好几天。 解决方法 后面有一天在看vue的官方文档，它的
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
在Vue2和Element-UI框架下，开发一个具备el-aside侧边栏容器收缩与展开功能的应用是一项常见的任务。Element-UI是基于Vue2的组件库，提供了丰富的UI组件，其中包括el-aside，用于创建侧边栏布局。下面将详细阐述实现...
vue2.0 + element UI 中 el-table 数据导出Excel的方法
08-27
Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法 以下是对 Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法的详细解释： 1. 安装相关依赖 在使用 Vue2.0 + Element UI 中 el-table 数据导出 ...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
vue样式穿透 ::v-deep的具体使用
10-15
Vue.js 是一款流行的前端框架，它的组件化特性使得开发更加高效。然而，当涉及到组件间的样式隔离时，可能会遇到一些挑战。Vue 提供了一种叫做 `scoped` 的属性，用于限制样式只作用于当前组件，避免全局污染。但是...
1.常见报错[Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞
weixin_55181759的博客
05-06 9024
提示:[Vue warn]: children must be keyed: <el-col :span="6" v-if="SearchView(routerName.ifSecondaryChannel)"> <el-form-item label="二级渠道："> <el-select v-model="twochannelnameIds" multiple
[Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞
grootbaby
09-07 1865
如果需要在 el-select 上面绑定整个 item 对象时，但是展示只显示 name 字段，会报如标题所示错误。el-select 标签添加 value-key 属性，且值为 item 中的唯一属性值，如 id。
[Vue warn]: ＜transition-group＞ children must be keyed: ＜div＞报错解决
热门推荐
weixin_43242560的博客
07-15 2万+
标题[Vue warn]: children must be keyed: 今天学习了VUE的列表排序过渡 碰见报错 报错之前代码为： <transition-group name="flip-list" tag="div"> <van-cell v-for="(item,i) in list" v-bind:key="item.id"> {{item.name}} <!-- 使用 right-icon 插槽来自定义右
vuedraggable报错＜transition-group＞ children must be keyed: ＜div＞
最新发布
lotpyve的博客
11-27 1696
所以解决办法是要确保有对应的 :key 值，当然，即使没有 <transition-group> 标签，我们在 v-for 循环的时候，也要确保有对应的 :key 值，并且这个 :key 值是唯一的。报错的原因是因为添加了<transition-group>标签，然后又没有对应的 :key 值，假如没有添加<transition-group>，则就不会报错。但是假如同样的代码，我加上 <transition-group> 标签后，如果 :key 没有对应的值，他就会报错。
使用vue draggable报错[Vue warn]: ＜transition-group＞ children must be keyed:
YueMiaoL的博客
12-17 9305
贴个vue draggable中文文档：vue.draggable中文文档 - itxst.com 最近使用vue draggable时，想在推拽的组件里添加其它不能被拖拽的元素，因此使用了handle属性。结果报错，导致新增的元素并没有展示出来。 解决办法：在该元素的父级绑定key 以下为记录过程，以官方文档示例代码为例，示例代码部分如下： <div class="itxst"> <div&...
el-select 组件在动态给改变 多选单选的功能时候报错 ＜transition-group＞ children must be keyed: ＜ElTag＞
weixin_49210760的博客
11-16 414
第一种.在 el-select 组件上 设置key 在切换mult 为 true false的时候一起变化。从单选切换到多选 ， v-model 确实是初始化为了[] , 但是input依旧显示之前选择的值。这里要注意顺序 以及使用$nextrick 才会生效。第二种.在每次切换状态前。先把之前的数据清空一遍。不一定这种，只要能变化就好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值