입력에 초점을 맞추고 @click을 하면 Vue.js 입력 제안 표시

입력에 초점을 맞추고 @click을 하면 Vue.js 입력 제안 표시

앱에 작은 문제가 있습니다.이렇게 v-show와 @focus를 사용하여 입력이 집중된 경우에만 검색 제안을 표시합니다.

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

//suggestions div
v-show="shouldShowSuggestions"

입력에 초점을 맞추면 제안이 올바르게 표시되지만 제안을 클릭하려고 하면 링크가 클릭되지 않고 @blur로 인해 제안이 사라집니다.

그 문제는 알지만 어떻게 대처해야 할지 모르겠어요.좋은 생각 있어요?

문제가 있는 펜이 명확하지 않을 경우를 대비해서 작성했습니다.재생하려면 입력에 초점을 맞추고 제안을 클릭해 보십시오.

코드명: https://codepen.io/anon/pen/vrdavv

클릭 이벤트는 마우스 아래로 및 위로 동작으로 구성됩니다.마우스를 아래로 하면 입력이 흐릿해지므로 클릭 이벤트가 발생하기 전에 입력이 숨겨집니다.

를 사용해 보세요.mousedown대신 이벤트click(단, 터치 디바이스에서는 동작하지 않을 가능성이 있습니다).

아니면 더 좋은 것은, 이 문제를 예방할 수 있다는 것입니다.mousedown초점 요소가 흐려지는 이벤트:

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

몇 가지 누락이 있습니다.

1. 입력 필드가 없습니다.v-model. 를 바인드해야 합니다.input에 필딩하다.data반응하기 위해 속성을 지정합니다.자세한 내용은 여기를 참조하십시오.
2. 패스 더suggestion에게@click이벤트를 제안 div에 첨부합니다.

업데이트된 코드펜 링크입니다.

이게 도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/50943833/vue-js-input-suggestions-visible-when-input-is-focused-and-click