vue中input的blur影响下拉框中点击事件

最新推荐文章于 2025-02-25 16:52:15 发布

好菜的程序媛

最新推荐文章于 2025-02-25 16:52:15 发布

阅读量4k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/Gomeer/article/details/93628422

版权

vue 专栏收录该内容

38 篇文章

订阅专栏

本文详细解析了Vue.js中输入框在选中下拉框数据后，选中的值未能在input中展示的问题原因及两种解决方案：一是调整blur事件处理函数执行时机；二是更改事件监听为优先级更高的mousedown。

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

<input class="search-ipt" type="search" autocomplete="off" name="search" value="" @focus="inFocus()" @blur="inBlur()" v-model="val" @keydown.enter="search()">
<ul class="search-result clearfix" v-show="headerStatus">
    <li v-for="item in results">
          <span class="item-name" @click="searchClick($event)">{{item.name}}</span>
           <span class="item-num">约有{{item.number}}件</span>
    </li>
</ul>

选择下拉框中的数据后，选中的值不会在input中展示。主要的原因是blur的优先级比click高，blur后清空数组，click将无法执行。

解决办法一：blur执行的函数可以加个定时器，在100ms后执行

解决办法二：将click换成优先级更高的mousedown，将优先于blur执行