关于vue单选和多选切换过程中的坑

最新推荐文章于 2024-06-11 10:22:07 发布

iter23

最新推荐文章于 2024-06-11 10:22:07 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue select 单选复选切换报错

本文链接：https://blog.youkuaiyun.com/iter23/article/details/91824161

探讨了在Vue中切换单选与多选时遇到的<transition-group>childrenmustbekeyed:<ElTag>错误，并提供了解决方案。通过使用v-if、watch监控和setTimeout实现，虽然功能满足需求，但用户体验有待提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于vue单选和多选切换过程中的坑
问题：vue单选多选切换时，会报错，<transition-group> children must be keyed: <ElTag>原因是切换过程中错误栈都在Vue内部

解决办法：select标签加v-if判断，multiple属性加条件multiple，watch监控multiple的变化，先关闭select再重新加载。

<el-select    v-if="update"   >
	<option :multiple="multiple"></option>
</el-select>

<script>
{  
data(){  
  return {      
  update: true，
  updates:[] ,
   updateIndex:null,
   multiples:[],
   multiple:true,
     } 
 }, 
methods:{
a(){
this.multiple = true
}
},
 watch:{  
  'multiple'(){ //单个监控
     this.update = false  
    setTimeout(()=>{   
     this.update = true 
     }，300)  
  } ,
     'multiples'(val) {//监控数组时
      this.$set(this.updates, this.updateIndex, false)
      setTimeout(() => {
        this.$set(this.updates, this.updateIndex, true)
      }, 300)
    },
 }}</script>

不足之处：切换过程中有短暂的可见的框变动。功能满足，但实现效果不很理想。