el-select 组件在动态给改变 多选单选的功能时候报错 ＜transition-group＞ children must be keyed: ＜ElTag＞

已于 2023-06-20 09:35:17 修改
阅读量377 收藏 1
点赞数
分类专栏： elementui 前端 文章标签： vue.js 前端 javascript
于 2022-11-16 18:15:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49210760/article/details/127890359
版权

el-select 组件在动态给改变 多选单选的功能时候报错 children must be keyed:

从单选切换到多选 ， v-model 确实是初始化为了[] , 但是input依旧显示之前选择的值

解决方法
第一种.在 el-select 组件上 设置key 在切换mult 为 true false的时候一起变化
不一定这种，只要能变化就好
在这里插入图片描述

第二种.在每次切换状态前。先把之前的数据清空一遍
这里要注意顺序 以及使用$nextrick 才会生效
在这里插入图片描述

沁染流年
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-transition-components:易于配置的React组件用于动画过渡:woman_dancing:
05-14
动画组件库和高阶组件，用于从react-transition-group生成易于配置的<Transition>组件。 react-transition-components压缩了3 kB，对react和react-transition-group具有对等依赖性，并且默认情况下支持webpack摇树...
react-transition-group-learning:使用React转换组和anime.js
05-16
React Transition Group是React生态系统中的一个库，用于处理组件的进入、退出和状态转换效果，而Anime.js是一个独立的JavaScript动画库，提供了丰富的动画控制和强大的性能。这两个工具结合使用，可以为React应用...
[Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞
weixin_43928792的博客
05-30 1957
报错提示：[Vue warn]: children must be keyed: 解决方案： el-select标准中设置value-key=“id”，这个id为v-for对象中item唯一的值 代码示例： <el-select v-model="approvalList" value-key="userId" placeholder="请选择"> <el-option v-for=
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 ...
el-select报错：vue.esm.js?5cd5:5105 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞；无法选中
qq_45327886的博客
04-10 3426
children must be keyed: ＜ElTag＞；el-select无法选中
vue2+elui报错[Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞
最新发布
sfumato的博客
03-23 867
我没有使用transition-group，很明显是一个内部错误。错误触发时机是我选择了多选框的内容，点击表单重置按钮，报错。虽然重置后多选框的值都没了，但是并未显示【请选择】字段，说明value是有问题的。
[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中 select多选 ＜transition-group＞ children must be keyed: ＜ElTag＞报错问题
---
07-27 7803
查询出结果说是没有给<el-select>设置value-key="id"，这个id为v-for中item唯一的值，，但是我这边添加了后还是报错，后来知道是因为之前设置的枚举值被删除了，导致获取不到这个枚举值，因此请求后台传递这个被删除的枚举值时才报此错误。 处理方案是设置if条件，当这个回显枚举值为undefined时过滤掉，此问题是后台删改数据导致，前端此法可以过滤报错问题，但不是在根本上解决问题 以上理解也可能是错误的，记录备忘。。。 ...
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
在Vue2和Element-UI框架下，开发一个具备el-aside侧边栏容器收缩与展开功能的应用是一项常见的任务。Element-UI是基于Vue2的组件库，提供了丰富的UI组件，其中包括el-aside，用于创建侧边栏布局。下面将详细阐述实现...
vue 组件中使用 transition 和 transition-group实现过渡动画
12-29
记一次vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版&hellip; template模板结构 // 单个元素 <transition name=自定义名字> <p ...
vue组件 keep-alive 和 transition 使用详解
10-16
在Vue.js中，`keep-alive`和`transition`组件是两种非常重要的功能，它们分别用于组件的状态管理和过渡效果。 1. **`keep-alive`组件**：`keep-alive`的主要作用是缓存组件，使得组件的状态在切换时得以保留，避免...
【vue warn】报错日记之＜transition-group＞ children must be keyed: ＜ElTag＞
weixin_53594144的博客
05-29 7528
​​​​​问题描述 vue + element，在列表中切换类型时控制台一直warn警告...<transition-group> children must be keyed: <ElTag>... 带着警告信息去百度搜了下问题，呈现的结果里多数指向说是因为el-select需写value-key属性，于是果断给el-select加上value-key，然而问题没解决？ 此外还衍生一个小问题，如下图示，困扰了好几天。 解决方法 后面有一天在看vue的官方文档，它的
【填坑日记】<transition-group> children must be keyed: <ElTag>
weixin_33768481的博客
08-14 3858
写项目的时候，自己测试没有问题。联调的时候发现的。 一个页面点击每个下拉框选择的时候，都会报这个错的。 查找自己写的每个下拉框发现都给了：key值。自己mock测试的时候也没有什么问题。 segmentfault.com/q/101000000… blog.csdn.net/wangwangwan… 然后挨着检索，发现实际清空是从接口拿到的数据是 22,12,23 这种形式，自己要经过转义成数值...
1.常见报错[Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞
weixin_55181759的博客
05-06 8726
提示:[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
el-select绑定值为对象时，报错[Vue warn]: <transition-group> children must be keyed: <ElTag>...
weixin_30522183的博客
11-05 918
解决方法： <el-select v-model="syncParams.toSlaveList" multiple value-key="ip" placeholder="请选择"> <el-option v-for="item in slaveList" ...
Element-ui中select动态修改
qq_45360390的博客
03-24 2388
需求 请求后台接口，后台返回一个数组，如[1,0,1,0],其中1为可以选中，0为不可以选中，根据后台返回的数组来决定下拉框里面的数据是否可以选中 解决思路 将后台返回数据进行便利 将options中的所有选项都添加 disabled: false 使用indexOf()将后台返回来的数据中不等于1的值的下标返回出来 将options数组也进行遍历 把返回过来不等于1的下表和options的下表进行判断，相同下标的选项禁用 源码 template里面 <div class="loginInp
又报错了<transition-group> children must be keyed: <keep-alive>
05-20
这个错误通常是因为在使用 Vue.js 的 Transition 组件时，没有为其中的子元素设置唯一的 key 属性。 你可以尝试在你的代码中查找到使用了 <transition-group> 和 <keep-alive> 组件的地方，并在它们的子元素中添加 key 属性。例如： ```html <transition-group> <div v-for="item in items" :key="item.id"> {{ item.text }} </div> </transition-group> <keep-alive> <router-view :key="$route.fullPath"></router-view> </keep-alive> ``` 这里的 `:key` 属性值可以是一个唯一的标识符，比如数据中的 `id` 字段或者当前路由的完整路径。这样做可以让 Vue.js 更好地追踪组件的状态变化，从而避免出现类似的错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值