Блог

Я столкнулся с проблемой с моим компонентом автозаполнения. всякий раз, когда я ввожу что-либо в поле ввода, ввод сбрасывается.Я имею в виду, что он не позволяет мне ничего вводить.Он просто продолжает сбрасываться, прежде чем я смогу полностью что-либо ввести.

main.js

 
Vue.component('g-autocomplete', {
  props: ['list','value','title'],
  data() {
    return {
      input: '',
      
    }
  },
  template: `<template>
  <div class="autocomplete">
    <input style="font-size: 12pt; height: 36px; width:1800px; " type="text"  v-model="input"  @input="handleInput"/>
     <ul v-if="input" >
      <li v-for="(item, i) in list" :key="i" @click="setInput(item)" >
         <!-- {{ autocompleteData }} -->
          <template v-if="title!='manager'">
          <div class="container">
            <p>
              <b>ID:</b>
              {{item.id}}
            </p>
            <p>
              <b>Description:</b>
              {{item.description}}
            </p>
          </div>
        </template>
         <template v-else>
        <div class="container">
            <p>
              <b>ID:</b>
              {{item.id}}
            </p>
            <p>
              <b>First Name:</b>
              {{item.firstName}}
            </p>
            <p>
              <b>Last Name:</b>
              {{item.lastName}}
            </p>
          </div>
        </template>
           </li>
    </ul>
  </div>
</template>`,
  methods: {
    handleInput(e) {
      console.log('inside handleInput')
      this.$emit('input', e.target.value)
    },

    setInput(value) {
      console.log('inside setInput')
      this.input = value
      this.$emit('click', value)
    },

  },
  watch: {
    $props: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        console.log('new value is' newValue)
        console.log('old value is' oldValue)
        console.log('value inside handler' this.value)
        console.log('list inside handler' this.list)
        console.log('title inside handler' this.title)
       this.input=this.value

      }
    }
    // msg(newVal) {
    //     this.msgCopy = newVal;
    // }
}
})
  

я повторно использую вышеупомянутый компонент из разных страниц vue следующим образом-

       <b-field label="Custom Business Unit">
      <g-autocomplete v-on:input="getAsyncDataBusinessUnit" v-on:click="(option) => {updateValue(option.id,'businessUnit')}" :value="this.objectData.businessUnit" :list="dataBusinessUnit" title='businessUnit' >
      </g-autocomplete>
</b-field> 
  

моя функция debounce, которая вызывается, когда что-то вводится в поле ввода.

 getAsyncDataBusinessUnit: debounce(function(name) {
      if (!name.length) {
        this.dataBusinessUnit = [];
        return;
      }
      this.isFetching = true;
      api
        .getSearchData(this.sessionData.key,`/businessunit/?filter={id} LIKE '%${name}%' OR {description} LIKE '%${name}%'`)
        .then(response => {
          this.dataBusinessUnit = [];
          response.forEach(item => {
            this.dataBusinessUnit.push(item);
          });
        })
        .catch(error => {
          this.dataBusinessUnit = [];
          throw error;
        })
        .finally(() => {
          this.isFetching = false;
        });
    }, 500),

  

в чем может быть проблема? Также я заметил, что проблема не возникает, если я закомментирую тело функции debounce.Поэтому я чувствую, что в функции debounce есть что-то, что вызывает это.Я попытаюсь изолировать проблему, но я хочу понять, что именно вызывает эту проблему. Пожалуйста, помогите?