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

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

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

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

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

bug出现过程：

1.点击业务类型下拉选，选择选项一，F12能观察到成功赋值"one"传到后台完成了过滤查询；

2.我现在不想通过“one”来过滤了，我想查询所有的，于是我再次点开下拉选选择全部，奇怪的时候发生了，竟然无法选择“全部”这个选项。如下图所示：

通过上面的两部操作，就可以看到无法选择这个值。并且点击查询后，会发现前端依然将上一次选择的值“one”给传到后台了，而并非空串''。

3.第三步 ：第三次点开下拉选，再次选择“全部”，你会发现这时候终于选上了。但是，然并卵，并没有什么卵用。

通过上图你可以看出，就算你选上了“全部”，也是没什么卵用的，依然给你传上次选择的“one”。

以上便是vue的下拉选无法选择“全部”，也无法赋值为空串的bug。而且这个bug并不完全表现在操作下拉选的时候，在进行刷新，清空的时候依然存在这个bug。同样的，重新加载页面后，我们再来进行下面的操作步骤：

1.选择“选项二”，点击搜索，在F12里可以看到businessType成功赋值为“two”，没有任何问题。为了方便对比，同时我还选择了其它的值，如下图：

2.这时候我想刷新页面，清空所有选择的值，重新查询一次，这时候奇怪的事情发生了，下拉选的值无法清除，其它的值都可以清楚，偏偏，唯独就下拉选的不可以。准确点来说，是this.body对象中的属性businessType无法赋值为空''，因为刷新是调用了clear()方法。同在一个对象body里，为什么，为什么除了businessType无法赋值为空串外，其它的属性都可以？“本自同对象，何故你与众不同？”

于是我决定打个断点，一探究竟。结果竟然神奇的发现，点击刷新后，调用clear()方法，this.body.businessType的值确实被赋值为了空串''。但是为什么还是往后台传“two”呢？

3.第三步，再次刷新。会惊奇的发现，所有的值被清空了。这就留下了一个引人深思的问题：“businessType”的值为什么要刷两次才可以清空，其它的值只需要一次？

我开始思考，研究这个问题。通过我的观察，虽然表面上看，我们操作的是一个对象body里的属性，一部分属性无法赋值为空串''，一部分可以。但转换思维，从另一个角度来看，这些对象中无法被赋值为空串''的属性，都有绑定了v-model，并且都在i-select下拉选中绑定的。于是我推测这跟 v-model和i-select混合使用有关系。为了证实这个观点，我又找了其它页面测试，结果发现所有对象中的属性如果在i-select下拉选中双向绑定了v-model，第一次都无法赋值为空串''，都会继续传上一次的值到后台。必须要进行两次赋值为空串，才能真正的赋值为空串。

根据这些研究，推敲出一个逻辑： v-model和i-select混合使用时，每次赋值的时候，其值都被记录，当下次赋值的时候，如果判断为空串''，将取上一次赋值的值，重新赋值给这个属性。

为此我还特意整理了一根演示代码逻辑：

从上面的代码可以看出，每一次调用updateObject()方法进行更新数据的时候，都会先判断传入的值是否为空串''，如果是就取上次的值赋值，如果不是就取传入的值。与此同时，每次都记录调用方法时传入的值。

根据上面的代码逻辑，就能合理的解释当你在 i-select的下拉选选择了一个值“one”后，为什么第一次刷新的时候明明debug看到值已经是空串''了，可还是把“one”传到看后台，第二次刷新的时候才真正的传入了空串''。

虽然以上代码逻辑能解释这种现象，但vue的底层是不是这样的不得而知。由于本人水平有限，无法深入解读其源码，只好将这个bug反馈给vue官方。期待官方能告诉我一个答案。虽然我未能研究出底层原理，但也想出了两种解决方案：

1.使用null替代空串''，用null以后你会发现刷新的时候只需要一次就可以把值清空了，而且下拉选选择“全部”选项的时候，一次就可以选中，而且也能成功赋值传入后台。

2.使用空格' '替换空串''，然后后台进行去空格操作。或者是采取其它标识符，例如“ALL”之类，后台再进行判断后重新赋值。