javascript - How to hide the pre-query display box in Vue project

Question

In the Vue project, how can you click anywhere except itself to hide the pre-queried List in a component?

The code is as follows:
1. Data binding:

2. Event binding:

3. Some students will say that the input box is set to lose focus event, but the list shown in the figure shows ,, If you want to click to select the value in the list, the input will lose focus first, and it will appear that the list value cannot be selected.,,
4. Dear students passing by, take a look

Answer 1

My projects

mounted () {
      /***
       * 使得其点击之外的部分自动收起
       */
      document.addEventListener('click', (e) => {
        if (!this.$el.contains(e.target)) {
          this.reset()
        }
      })
    }

It means to click on the area that is not within this component to close the pop-up box. Of course, you can change this.$el to a ref to judge

Answer 2

document.addEventListener('click', function(e){
    //通过判断e.target 来判断点击的元素 当不属于下拉框和输入框的时候 隐藏下拉框
})

Answer 3

After thinking about it, I think Out of focus is still a relatively ideal event.
As for what you said
If you want to click on the value in the selected list, the input will lose focus first, and the list value will not be selected.
Add code to the bound focusout event As follows

eventHandler (event) {
  event.preventDefault()

  // 这里设置input 绑定的data
  
  this.bisible = false
}

This should solve the problem.

Answer 4

Well, what that person said is the same as mine