Vue.js 如何在vue js中创建自动完成组件？

我面临自动完成组件的问题。每当我在输入字段中键入任何内容时，输入都会被重置。我的意思是，它不允许我键入任何内容。它只是在我完全键入任何内容之前一直被重置

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;
    // }
}
})

---

这里可能有什么问题？我还注意到，如果我注释掉去盎司函数的主体，问题就不会发生。因此，我觉得去盎司函数中有某种东西导致了这个问题。我将尝试隔离问题，但我想了解到底是什么导致了这个问题。请提供帮助？

我无法重现您遇到的问题。但您可能需要修复以下问题：1。从模板字符串中删除根元素=

。2.使用

this.input=newValue.value

而不是

this.input=this.value

。问题似乎出在去盎司函数的某个地方。对dataBusinessUnit进行任何修改（推送操作）或重新初始化[]数组导致了这种情况。我不明白为什么，因为这种去盎司功能与以前使用的buefy的（基于bulma的）b-autocomplete完美配合。现在我已经创建了自己的自动完成组件loaddash debounce方法行为不正常您可以尝试使用loaddash debounce方法从api获取结果吗？

      <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> 

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