Javascript 如果用户单击外部，如何隐藏下拉菜单

我正在使用VueJS处理一个小项目，我正在进行自动完成，如果用户单击外部，我想隐藏我的下拉列表

这是我的代码：

<template>
    <div class="autocomplete">
        <input autocomplete="off" type="text" class="form-control form-control-border"  v-bind:placeholder="this.placeholder" v-model="query" @keyup="autoComplete" @focus="suggestion = true" />
        <div v-if="data.length >= 1 && suggestion">
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <li @click="selected(item[label], item.id)" v-for="item in data" :key="item.id">
                    <a class="dropdown-item" href="#">{{ item[label] }}</a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import {getAPI} from "../axios-api"

export default {
    props: {
        label: String,
        path: String,
        placeholder: String,
        action: String,
    },
    data() {
        return {
            suggestion: false,
            query: '',
            data: [],
        }
    },
    methods: {
        autoComplete(){
            if(/\S/.test(this.query) && this.query.length >= 3){
                getAPI.get(this.action + '?query=' + this.query).then((response) => {
                    this.data = response.data
                })
            }
        },
        selected(label, id){
            this.suggestion = false
            this.query = label
        }
    }
}
</script>

从“./axiosapi”导入{getAPI}
导出默认值{
道具：{
标签：字符串，
路径：字符串，
占位符：字符串，
动作：字符串，
},
数据（）{
返回{
建议：错，
查询：“”，
数据：[]，
}
},
方法：{
自动完成（）{
if（/\S/.test（this.query）和&this.query.length>=3）{
getAPI.get（this.action+'？query='+this.query）。然后（（响应）=>{
this.data=response.data
})
}
},
选定（标签、id）{
这个建议是错误的
this.query=标签
}
}
}

---

如何检测外部点击，以便将

suggestion

的值再次切换为

false

，

我建议对此使用指令。像这样的东西应该可以解决这个问题。答案在这里有详细的介绍