el-autocomplete与el-badge组合badge不更新

应用场景 

根据模糊搜索选择的值来判断该公司是否为会员公司，并在输入框右上角显示会员/非会员

        模糊查询

        选择后右上角动态显示会员/非会员

    

出现的问题

当我在搜索框输入的值刚好和我选择的值一样时，例如下面

选择了过后，右上角不显示标志

我原来的代码

        template中

        script中

看似是没有问题的对吧。select事件检测用户是否选择了公司，如果选择了就把该选项附带的信息赋值给addInfo，然后动态渲染badge标记的显示内容和样式。但是为什么当输入框输入的值与选择的值一样时，标记就渲染不出来了呢？

解决办法

• 造成原因

  告诉你解决办法前，我们先来了解一下浏览器的渲染机制：html解析器将html代码解析为DOM树、CSS解析器将CSS代码解析为CSSOM树，然后两者被结合在一起形成渲染树，最后GPU就根据我们形成的渲染树来绘制页面。这是浏览器渲染机制的简化版描述哈哈，更详情的请参考渲染页面：浏览器的工作原理 - Web 性能 | MDN (mozilla.org) 

        看完上面，想必你也知道了为啥输入和选择的文本相同时，标记不会出现。因为在输入完完整公司名后再去选择模糊搜出来的结果时，此时输入框内容（也就是变量绑定的值）和选择的一样，选择后，输入框绑定的变量压根没有变化，所以没办法引起DOM节点发生变化，从而使页面重新渲染

       所以我们想要使页面重新渲染，让标记出现，关键就是要在选择后，先改变输入框的值再赋值

• 解决

        我的解决方法很傻瓜式，就是在选择的回调@select="handleSelect"被调用时（此时已经输入了一个值：addInfo.firmName，例：成都特智汇能源科技有限公司），先将firmName赋值为" "，然后再赋值为成都特智汇能源科技有限公司

firmName='成都特智汇能源科技有限公司'->firmName=' '->firmName='成都特智汇能源科技有限公司'

第一个赋值是在输入时由于v-model双向绑定而赋的值

第二是将值清空

第三个是赋值为当前选择的值

• 代码

关键代码圈出来了哦！

这样就可以使HTML中addInfo.firmName的发生变化，从而使DOM树发生变化，造成页面重新渲染，标记就重新渲染出来了！