当输入获得焦点并@click 时，Vue.js 输入建议可见

Question

我的应用程序有一个小问题。仅当使用 v-show 和 @focus 聚焦输入时，我才显示搜索建议

//input
@focus="shouldShowSuggestions = true"
@blur="shouldShowSuggestions = false"

//suggestions div
v-show="shouldShowSuggestions"

当我专注于输入时，建议会正确显示，但是当我尝试单击建议时，不会单击链接，并且由于我拥有@blur，建议会消失。

我知道这个问题，但我不知道如何处理。有任何想法吗？

我创建了一支有问题的笔，以防不清楚。为了重现，请专注于输入并尝试单击建议。

代码笔： https: //codepen.io/anon/pen/vrdavv

Answer 1

单击事件由鼠标向下和向上操作组成。鼠标按下时输入将变得模糊，因此在单击事件发生之前它将被隐藏。

尝试使用该mousedown事件而不是click提前捕获它（但这可能不适用于触摸设备）。

或者，更好的是，您可以防止mousedown事件模糊焦点元素：

<a @mousedown.prevent @click="clickedElement">