Vue.js Vue自动完成元素-跟踪输入更改的问题

我拥有的：
自动完成元素

<div v-for="(user, index) in users">
    <input v-model="user.name"
           :list="users-autocomplete" @input="autocompleteUser(user.name, index)"/>
    <datalist :id="users-autocomplete">
        <option v-for="user in usersAutocomplete" v-bind:value="user.name"
                v-bind:label="user.name"></option>
    </datalist>
</div>

方法

async autocompleteUser(value, index) {
    let that = this
    await axios.get(//fetching data)
        .then(response => {
            that.usersAutocomplete = response.data
        })
}

问题与使用流程有关：

我开始输入

autocompleteeser（）

将一些数据放入

用户sautomplete

，而不是

我看到一个自动完成的建议并点击它

输入已更改，带有我选择的建议
和这个

@input=“autocompleteeser（user.name，index）”

再次被触发
因此，

axios

再次获取数据，

再次刷新

选择建议后，如何防止触发

@input

？现在我必须点击两次

---

我试图将

@click

绑定到

或

上，但没有成功。

如果您对event.data进行类型检查，如果数据列表触发输入事件，则返回未定义。为什么会这样，我目前不知道

因此，如果event.data未定义，解决此问题的一种简单但不太简单的方法是返回：

if(event.data === undefined) return;

在我的评论之后，我意识到你有一个用户循环。因此，除非您进行大量循环，否则观察程序不会工作得那么好

请注意，我无法解释此解决方案，而且我从未使用过数据列表，因此我无法保证这是一个好的解决方案

编辑：通过添加一些逻辑，您可以通过编程模糊输入元素，从而删除选项：

  if(e.data === undefined) {
    const allUserNames = this.usersAutocomplete.map(user => user.name)
    if(allUserNames.includes(value))
      this.$refs.myInput[0].blur();
    return
   }

newvue({
el:“#vue”，
数据（）{
返回{
用户：[{
名称：“”
}],
用户SautoComplete:[]
}
},
方法：{
自动完成器（e、值、索引）{
如果（例如，数据===未定义）{
const allUserNames=this.usersAutocomplete.map（user=>user.name）
if（包括（值））
这是.refs.myInput[0].blur（）；
返回
}
这个文件名为
。然后（响应=>{
log（“执行自动完成程序”）
this.usersAutocomplete=响应
})
},
dummyAsync（）{
常数数据=[
{姓名：'约翰·多伊'}，
{姓名：'无名氏'}，
{姓名：'博比·多伊'}
]
返回新承诺（解决=>{
setTimeout（函数（）{
解析（数据）；
}，400）；//想要的网络延迟
});
}
}
})
Vue.config.productionTip=Vue.config.devtools=false

---

这对我现在很有效。非常感谢你

我开始调查

InputEvent

。我发现一件事：当您在输入中键入内容时，会触发

InputEvent

，在

InputEvent

对象中有一个

inputType:insertText

。
当通过单击

选项更改输入值时，事件对象中不存在此类字段，事件实际上是

事件

，而不是

输入事件

在模板中，我们必须添加要传递的事件参数：

@input=“autocompleteeser（$event，user.昵称，index）”

然后相应地改变方法：

async autocompleteUser(e, value, index) {
    if (e.inputType !== 'insertText') {
        //input value is modified not by typing in the input
        //so we can clear our data source, used for datalist
        this.usersAutocomplete = []
        return
    }
    let that = this
    await axios.get(//fetching data)
        .then(response => {
            that.usersAutocomplete = response.data
        })
}

---

UPD：在Firefox中不起作用，因为

if (e.inputType !== 'insertText') {
    this.usersAutocomplete = []
    return
}

UPD2：修复

if (e.constructor.name !== 'InputEvent') {
  this.usersAutocomplete = []
  return
}

---

@input事件在每次输入值时同步激发changes@S我知道，但我还没有找到其他方法。我需要跟踪输入更改以进行API请求，另一方面，当我从自动完成列表中选择值时，我不需要跟踪输入更改。也许我可以使用一些标志，指示某些输入已经完成了自动完成，并且不需要跟踪其更改。但无论如何，如果我想清除输入并重新键入数据，我需要再次“激活”曲目。您可以使用。然后检查输入是否为===作为单击的元素（可能将单击的元素存储为标志）-然后删除@input&将axios移动到Watcher这仍然是一个问题（我录制了一段视频，这是一个如此贫民区的解决方案。天啊。似乎数据列表没有得到很好的支持。我发布了另一个解决方案，谢谢！如果不是你的答案，我不会开始调查那个事件！请注意，确实有，所以这个简单的If检查可能会带来一些错误。

if (e.constructor.name !== 'InputEvent') {
  this.usersAutocomplete = []
  return
}