Question

链接到codepen再现问题

我有一个名为search_val的文本字段，附加了一个观察程序。文本字段包含一个v-on keyup属性，用于检测何时按下“Enter”键。文本字段的值由观察者通过AJAX或输入键提交。当返回AJAX调用的结果时，它将被存储并且#my-results div变为可见。带有v-on click指令的按钮清除数据，select（）调用选择search_val文本字段。

如果我单击隐藏结果按钮，则会隐藏结果并按预期选择search_val文本字段。但是，如果我选项卡到隐藏结果按钮，然后按回车键，它会隐藏结果并选择search_val文本字段，但也会触发v-on keyup方法，然后重新提交搜索。一旦我选择（）search_val文本字段，如何停止重新提交密钥处理程序？提前谢谢。

HTML

<div id='my-app'>
  <input type='text' ref='text_search_val' v-model='search_val' v-on:keyup.enter="search"/>
  <div id='my-results' v-show="_.size(result)">
    <button type='button' v-on:click="hideResults">Do something and hide results</button>
  </div>
</div>

JS

var app = new Vue({
        el: '#my-app',
        data: {
            search_val: '',
            Qty: "",
            result: {}
        },
        watch : {
            search_val: function(new_search_val, old_search_val) {
                            this.search();
            }
        },
        methods: {
            hideResults: function (event) {
                this.result = {};
                this.$refs.text_search_val.select();
            },
                        search: function() {
                if (this.search_val.length > 0) {
                    this.result = {};
                    this.ajaxCall();
                }                           
                        },
            ajaxCall: _.debounce(
                function () {
                    var vm = this;
                    axios.get('https://reqres.in/api/users', {
                        params: {
                            search_val: vm.search_val
                        }
                    })
                    .then(function (response) {
                        vm.result = response.data;
                        vm.$nextTick(function () {
                          vm.$refs.number_qty.select();
                        });
                    })
                    .catch(function (error) {
                        console.log('Could not reach the API. ' + error)
                    })
                },
                // This is the number of milliseconds we wait for the
                // user to stop typing.
                500
            )
        }
    });

Answer 1

按钮上的按键的click阶段正在处理keydown，因此当您释放密钥（生成keyup）时，重点将重新放在输入，获取事件。

将输入中的事件更改为keypress或keydown。

由先前的onclick处理程序

1 个答案: