Html 在外部单击时如何关闭自动完成下拉列表？

当点击任何外部区域时，如何关闭自动完成下拉列表？目前，我正在使用另一个名为departmentDetail.vue的vue页面（父页面）的不同标签调用我的自定义自动完成组件（子演示组件）3次

例如：

departmentDetail.vue

<b-field label="Custom Business Unit ">
    <AutoComplete :method="getAsyncDataBusinessUnit" title='businessUnit'   :autocompleteData="dataBusinessUnit" viewname='DepartmentDetail'>
      </AutoComplete>
 </b-field>  

 <b-field label="Custom Managers">
    <AutoComplete :method="getAsyncData" title='manager'  :autocompleteData="dataManager" viewname='DepartmentDetail'>
      </AutoComplete>
     </b-field>  

<b-field label="Custom Location">
    <AutoComplete :method=" getAsyncDataLocation" title='location'  :autocompleteData="dataLocation" viewname='DepartmentDetail'>
      </AutoComplete>
</b-field> 

为什么页面加载时，这些输入字段中的值有时不显示？但在聚焦或我键入任何内容时，突然会显示值？知道为什么会发生这种情况吗？
关于您的最后一个问题：
“为什么页面加载时，有时这些输入字段中不会显示值？但在焦点或键入任何内容时，突然会显示值？知道为什么会出现这种情况吗？”

看起来您正在计算道具上使用API请求。
计算的道具是预渲染值。如果您的API是异步工作的，那么在解析完整请求之前，计算结果呈现为“空”

您可以尝试使用数据道具，并在Mounted（）或Created（）中使用API setter进行设置

编辑：
它可能看起来像这样：

    data() {
    return {
  //   results: [],
      dataBusinessUnit: [],
      results: [],
      viewData: [],
      objectData:[],
      sessionData:[],
      isLoading: [],
      isFetching: false
     // vignesh: this.objectData[this.title]
    };
  }, 
  computed: {
           
            newRecord() {
                return this.$route.params.id === null;
            },
            getTitle() {
              return this.title
            }            
  }, 
    mounted() {
     this.viewData = this.$store.getters.getViewData('DepartmentDetail');
     this.objectData = this.$store.getters.getApiData(this.viewData.api_id).data; 
this.sessionData = this.$store.getters.getSessionData();
this.isLoading = this.$store.getters.getApiData(this.viewData.api_id).isLoading; 


      
  },

您好，谢谢您的回复，但是您能给我一个使用我的代码的示例吗？如果您看到我在computed部分-viewData（）下有以下方法{返回这个。$store.getters.getViewData（'DepartmentDetail'）}，objectData（）{返回此.$store.getters.getApiData（this.viewData.api_id）.dataok谢谢您的回复，我将尝试您的建议。关于我的第一个问题（单击任何外部区域时如何关闭自动完成下拉列表），有什么想法吗
    data() {
    return {
  //   results: [],
      dataBusinessUnit: [],
      results: [],
      viewData: [],
      objectData:[],
      sessionData:[],
      isLoading: [],
      isFetching: false
     // vignesh: this.objectData[this.title]
    };
  }, 
  computed: {
           
            newRecord() {
                return this.$route.params.id === null;
            },
            getTitle() {
              return this.title
            }            
  }, 
    mounted() {
     this.viewData = this.$store.getters.getViewData('DepartmentDetail');
     this.objectData = this.$store.getters.getApiData(this.viewData.api_id).data; 
this.sessionData = this.$store.getters.getSessionData();
this.isLoading = this.$store.getters.getApiData(this.viewData.api_id).isLoading; 


      
  },