时间戳

首页 > 解决方案 > V-model 绑定在移动设备上不起作用，除非我添加警报

javascript - V-model 绑定在移动设备上不起作用，除非我添加警报

问题描述

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

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

函数 v-model 引用如下所示：

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

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

标签： javascripthtmlvue.js

解决方案

这是一个非常有趣的！事实证明，将两种方式的数据绑定解耦就成功了一半。

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

我导出了您的 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]

来自哥本哈根的问候！

推荐阅读