vue下拉选组件i-select无法选取全部，无法赋值为空串''的诡异bug

最新推荐文章于 2025-06-12 16:14:54 发布

原创

最新推荐文章于 2025-06-12 16:14:54 发布 · 5.2k 阅读

0 ·

CC 4.0 BY-SA版权

在Vue项目中遇到i-select下拉组件无法选择'全部'选项和赋值为空字符串''的诡异问题。经过分析，可能是v-model与i-select结合使用时，值被记录导致。解决方案包括使用null或空格替代空串，或者采用特殊标识符在后台处理。

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

这是一个让人头皮发麻，全身慎得慌的诡异bug，因为它不符合科学逻辑，违反常理。仿佛有一只黑手在恶意操控着，让前端工程师们觉得不可以思议，也无可奈何。

我们在做前端开发时，对于下拉选一般都会有一个“全部”选项，value=''，用于清空前面选择的值，这是在正常不过了，但这在vue就开始变得奇奇怪怪，逻辑狗屁不通。

下面我开始对这个诡异的bug进行解刨，分析：

我的第一个页面的代码如下：

 body: {
	    businessType:'', //业务类型
            goodsTypePath:'',  
            startTime:'',  //开始时间
            endTime:'',    //结束时间
            orderNo:'',     //单据编号
        },


<form-item label="业务类型">
     <i-select  v-model="body.businessType" >
          <i-option value=''>全部</i-option>
          <i-option value="one">选项一</i-option>
          <i-option value="two">选项二</i-option>
    </i-select>         
</form-item>


methods: {

    clear() {
            this.body={
		businessType:'', 
                goodsTypePath:'',