输入焦点和@click时可见Vue.js输入建议

Question

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

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

//suggestions div
v-show="shouldShowSuggestions"

当我专注于输入时，建议会正确显示，但是当我尝试单击建议时，由于我有@blur，因此未单击链接，建议也消失了。

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

我创建了有问题的笔，以防万一。 要重现，请专注于输入内容，然后尝试点击建议。

Codepen：https://codepen.io/anon/pen/vrdavv

Answer 1

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

请尝试使用mousedown事件而不是click来更早地捕获它（但这可能不适用于触摸设备）。

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

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

Answer 2

缺少几件事：

1. 输入字段缺少The <src> path must be inside the context of the build; you cannot COPY ../something /something, because the first step of a docker build is to send the context directory (and subdirectories) to the docker daemon.。您需要将v-model字段绑定到input属性，以使其反应。进一步了解here。
2. 将data传递到建议div中附加的suggestion事件。

这是更新后的codepen link.

希望这会有所帮助。