Question

在任何外部区域上单击时如何关闭自动完成下拉菜单？目前，我正在使用另一个名为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>

AutoComplete.vue（由我创建的自定义组件）

<template>

  <div class="autocomplete">
    <input style="font-size: 12pt; height: 36px; width:1800px; " type="text"    v-model="objectData[title]" @focus="getAsyncDataBusinessUnit" @input="getAsyncDataBusinessUnit"/>
<ul v-show="isFetching" >
      <li v-for="(dataBusinessUnit, i) in dataBusinessUnit" :key="i" @click="setResult(dataBusinessUnit)" >
        
          <template v-if="title!='manager'">
          <div class="container">
            <p>
              <b>ID:</b>
              {{dataBusinessUnit.id}}
            </p>
            <p>
              <b>Description:</b>
              {{dataBusinessUnit.description}}
            </p>
          </div>
        </template>
         <template v-else>
        <div class="container">
            <p>
              <b>ID:</b>
              {{dataBusinessUnit.id}}
            </p>
            <p>
              <b>First Name:</b>
              {{dataBusinessUnit.firstName}}
            </p>
            <p>
              <b>Last Name:</b>
              {{dataBusinessUnit.lastName}}
            </p>
          </div>
        </template>
           </li>
    </ul>
  </div>
</template>


<script>
import { viewMixin } from "../viewMixin.js";
import schemaData from '../store/schema';
import debounce from "lodash/debounce";
import api from "../store/api";
const ViewName = "AutoComplete";
var passedview;

export default {
  name: "AutoComplete",
   props: {
    method: { 
        type: Function 
        },
        title: String,
        viewname:String,
        autocompleteData: {
       type: Array,
       required: true
    }
  },
  

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

                var schema = schemaData[this.viewData.schema];
               

                if(typeof schema!=='undefined' && schema['properties'][fieldName]['type'] == 'date'){
                    val = this.formatDate(newValue);
                } else {
                    val = newValue;
                }
                
                this.$store.dispatch('updateDataObjectField', {
                    key: this.viewData.api_id,
                    field: fieldName,
                    value: val
                });
            },

 getAsyncDataBusinessUnit: debounce(function(name) {
             
       console.log('getAsyncDataBusinessUnit you typed'+name.target.value);
      if (!name.target.value.length) {
       // this.results = [];
       // this.dataBusinessUnit = [...this.results];
      //  this.isFetching = false;
       // return;
      }
   //   this.isFetching = true;
      

      api
         .getSearchData(this.sessionData.key,`/businessunit/`,{ filter: `{id}like'%${name.target.value}%'` })    
        .then(response => {
          this.results = [];
          if (!response.length)
          {
            console.log('inside if ')
          this.isFetching = false;
          }

          else{
            console.log('inside else')
            response.forEach(item => {
            this.results.push(item);
          });
         // this.dataBusinessUnit=this.results
          this.dataBusinessUnit = [...this.results];
          this.isFetching = true;
          }
         
          console.log('length of dataBusinessUnit is '+(this.dataBusinessUnit).length)
          console.log('contents of dataBusinessUnit array '+JSON.stringify(this.dataBusinessUnit))
        })
        .catch(error => {
          //this.dataBusinessUnit = [];
          throw error;
        })
        .finally(() => {
         // this.isFetching = true;
        });

    }, 500), 
      
    },
    
    components: {
    

    }

};
</script>

部门屏幕截图

为何在页面加载时有时值不会显示在这些输入字段中？但是一旦集中精力或者突然输入任何值，该值就会突然显示出来？你知道为什么会这样吗？

Answer 1

关于您的最后一个问题： “为什么在页面加载时有时值不会显示在这些输入字段中？但是当我集中注意力或者如果我键入任何内容时，值突然出现了吗？你知道为什么会这样吗？”

似乎您正在对计算道具使用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; 


      
  },

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

1 个答案: