Question

我的vue应用程序中的表单输入绑定存在一个非常奇怪的问题。我的输入字段是具有以下语法的自动建议搜索字段：

<input class="input" type="text" v-model="search" @input="onChange" @keyup.up="onArrowUp" @keyup.down="onArrowDown" @keyup.enter="onEnter"/>

函数v模型引用如下所示：

onChange () {
    this.reset()
    this.isOpen = true
    this.filterResults()
},
filterResults () {
    this.results = this.items.filter(item => item.toLowerCase().indexOf(this.search.toLowerCase()) > -1);
}

如this CodePen所示，它在台式机上运行良好，但是当我在移动设备上试用时，过滤不会发生。无论输入什么，它都只显示完整的结果列表。奇怪的是，如果我进行故障排除并尝试将警报添加到onChange和filterResults函数中，那么它突然会顺利运行。关于正在发生的事情以及如何解决它的任何想法？

Answer 1

这真的很有趣！事实证明，将数据绑定的两种方式去耦可以解决一半的麻烦。

也值得注意：关键事件在移动设备上无法始终正确检测到，重叠事件很糟糕。当事件触发并在组件状态中设置某些内容时，执行顺序并不总是很明显。

我导出了您的codepen并将HTML（而不是pug模板）编辑为：

<input class="input" type="text" v-bind:value="search" @input="updateSearch($event.target.value)" @keyup.up="onArrowUp" @keyup.down="onArrowDown" @keyup.enter="onEnter"/>

现在我在vue组件中的前两个方法是：

    filterResults(){
        this.isOpen = true;
        this.results = this.items.filter(item => item.toLowerCase().indexOf(this.search.toLowerCase()) > -1);
    },
    updateSearch(value){
        this.search = value;
        this.filterResults();
    },

代替onChange。

如果您想要工作的示例，我们将很高兴为您压缩它，但我不只是想将其放到网上，因为它是一支私人笔。

以下JavaScript文件的完整差异：

% diff js/index.js ../jobrisk-calculator_oprindelig/js/index.js 
16,18c16,19
<               filterResults(){
<                       this.isOpen = true;
<                       this.results = this.items.filter(item => item.toLowerCase().indexOf
(this.search.toLowerCase()) > -1);
---
>               onChange () {
>                       this.reset()
>                       this.isOpen = true
>                       this.filterResults()
20,22c21,22
<               updateSearch(value){
<                       this.search = value;
<                       this.filterResults();
---
>               filterResults() {
>                       this.results = this.items.filter(item => item.toLowerCase().indexOf
(this.search.toLowerCase()) > -1);
49c49
<                       this.setResult(this.results[this.arrowCounter]);
---
>                       this.search = this.results[this.arrowCounter]

来自哥本哈根的问候！

V型绑定不适用于移动设备，除非添加警报

1 个答案: