共计 969 个字符，预计需要花费 3 分钟才能阅读完成。
vue 单选多选切换时，会报错，<transition-group> children must be keyed: <ElTag> 起因是切换过程中谬误栈都在 Vue 外部
应用场景: 封装 el-select 组件, 传不同的值渲染不同的下拉选项, 当 multiple = true 是渲染多选框,multiple = false 渲染单选框, 当弹框里第一次渲染单选, 第二次渲染多选, 而后操作下拉框的时候控制台报很多谬误 [Vue warn]: Invalid prop: type check failed for prop “value”. Expected String, Number, got Array.
TypeError: Cannot read property ‘value’ of undefined
at VueComponent.handleQueryChange (element-ui.common.js?ccbf:8469)
at VueComponent.value (element-ui.common.js?ccbf:8366)
at Watcher.run (vue.esm.js?efeb:4571)
at flushSchedulerQueue (vue.esm.js?efeb:4313)
at Array.eval (vue.esm.js?efeb:1989)
at flushCallbacks (vue.esm.js?efeb:1915)
弹框第一次显示并不会报错, 当弹框屡次呈现, 有单选或者多选切换的时候, 调试代码的时候标红的局部是 undefined , 所以导致报错, 也不晓得是什么起因造成的, 这行代码到底是什么作用
起初在社区外面, 征询了其他人, 解决了, 之前我的 key 值是下标, 导致 vue 认为单选和多选是同一个组件, 没有强制去刷新组件
https://cn.vuejs.org/v2/api/#key
key 的非凡属性次要用在 Vue 的虚构 DOM 算法，在新旧 nodes 比照时辨识 VNodes。如果不应用 key，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试就地批改 / 复用雷同类型元素的算法。而应用 key 时，它会基于 key 的变动重新排列元素程序，并且会移除 key 不存在的元素。
有雷同父元素的子元素必须有独特的 key。反复的 key 会造成渲染谬误。
https://segmentfault.com/q/10…
