Как реализовать собственный компонент автозаполнения в vue js? - PullRequest
Новая
       5

Как реализовать собственный компонент автозаполнения в vue js?

0 голосов
/ 08 июля 2020

Я создал пользовательский компонент автозаполнения в своем приложении. Я вызываю этот компонент из другого vue файла (страницы) с именем DepartmentDetail, например:

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" :value="this.objectData[this.title]" @input="method"  /> 
    <ul v-show="isFetching" >
      <li v-for="(autocompleteData, i) in autocompleteData" :key="i" @click="setResult(autocompleteData)" >

          <template v-if="title!='manager'">
          <div class="container">
            <p>
              <b>ID:</b>
              {{autocompleteData.id}}
            </p>
            <p>
              <b>Description:</b>
              {{autocompleteData.description}}
            </p>
          </div>
        </template>
         <template v-else>
        <div class="container">
            <p>
              <b>ID:</b>
              {{autocompleteData.id}}
            </p>
            <p>
              <b>First Name:</b>
              {{autocompleteData.firstName}}
            </p>
            <p>
              <b>Last Name:</b>
              {{autocompleteData.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="DepartmentDetail";                                  

export default {
  name: "AutoComplete",
  props: {
    method: { 
        type: Function 
        },
        title: String,
        viewname:String,
        autocompleteData: {
       type: Array,
       required: true
    }
  },
    
   data() {
    return {
      selected: null,
      isFetching: false,
      dataAction: [],      
    };
  }, 
  computed: {
            viewData() {
                return this.$store.getters.getViewData(passedview)
            },
            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
            }            
  },
 
    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 {
                    console.log('newValue is'+newValue)
                    console.log('fieldName is'+fieldName)
                    val = newValue;
                }
                
               
                this.$store.dispatch('updateDataObjectField', {
                    key: this.viewData.api_id,
                    field: fieldName,
                    value: val
                });
            },
     
    },
    
    

};
</script>

В настоящее время есть некоторые проблемы с этим автозаполнением. Теперь, когда я начинаю вводить что-либо в эти поля, то сразу через 1-2 секунды значение по умолчанию принимает данные, поступающие из store.getters. И еще одна проблема заключается в том, что если я go вернусь на предыдущую страницу и снова вернусь к экрану сведений об отделе, то иногда в полях нет значений, установленных по умолчанию (значения, поступающие из магазина). Пожалуйста, помогите?

...