vue el-select单选和多选切换报错

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)
已解决 悬赏分:30 - 解决时间 2021-11-29 02:01
反对 0举报 0 收藏 0

回答3

最佳
  • @

    image.png
    image.png

    弹框第一次显示并不会报错,当弹框多次出现,有单选或者多选切换的时候,调试代码的时候标红的部分是undefined ,所以导致报错,也不知道是什么原因造成的,这行代码到底是什么作用

    后来在社区里面,咨询了其他人,解决了,之前我的key值是下标,导致vue认为单选和多选是同一个组件,没有强制去刷新组件

    https://cn.vuejs.org/v2/api/#key
    key的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

    有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

    支持 0 反对 0 举报
    2021-11-28 09:51
  • @

    当multiple变化时,也需要把el-select 所绑定的值初始化一下

    `
    <el-dialog

      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <el-select v-model="value" :multiple="multiple">
        <el-option label="111" value="111"></el-option>
        <el-option label="222" value="222"></el-option>
      </el-select>
    </el-dialog>
    <el-button @click="click">0</el-button>
    <el-button @click="click1">1</el-button>
    
    
    
    

    click() {

      this.value = ''
      this.dialogVisible = true
      this.multiple = false
    },
    click1() {
      this.value = []
      this.dialogVisible = true
      this.multiple = true
      
    },

    `

    我测试了一下,没有报错误,是不是你数据的原因,有可能vue没有检测到数据的变化,如果是这样的话,赋值的时候试一下用$set

    支持 0 反对 0 举报
    2021-11-28 10:37
  • @

    提示很明确:单选时候一个字符串或数字类型的值,多选框时候是个数组类型的值。

    支持 0 反对 0 举报
    2021-11-28 11:18