Question

我在Vue.js中有一个搜索组件。键入文本输入时，将从服务器获取搜索结果列表，然后显示在搜索字段下方的列表中。单击结果之一时，将触发submit事件。

但是，现在我尝试向文本输入添加模糊事件，当用户单击远离输入的位置时，该事件应该隐藏结果列表。除一种紧急情况外，此方法可以正常工作-单击结果不再触发submit事件。

我理解为什么会这样-blur事件显然在click事件之前触发，并隐藏了结果列表，然后才能在其中一个结果上注册点击。我的问题是，如何解决这个问题？在文本输入之外单击时，我需要关闭结果列表，但是显然，我还需要submit方法才能起作用。

以下是完整的组件：

<template>
    <div class="search basic-search">
        <input type="text" v-model="search_string" v-on:keyup="search" v-on:focus="activate" v-on:blur="inactivate" class="form-control search" placeholder="Search stocks" />
        <div :class="['search-results', active === true ? 'active' : '']">
            <div class="search-result" v-for="result in search_results" v-on:click="submit(result.id)">
                {{ result.name }} ({{ result.ticker }})
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                search_string : '',
                search_results : [],
                active : false
            };
        },

        methods : {
            search : function() {
                const axios_data = {
                    _token  : $('meta[name="csrf-token"]').attr('content'),
                    str : this.search_string
                };

                axios.post('/stock-search', axios_data).then(response => {

                    if(response.data.success){
                        this.search_results = response.data.stocks;
                        this.active = true;
                    }

                });
            },

            activate : function() {
                if(this.search_string !== '')
                    this.active = true;
            },

            inactivate : function() {
                this.active = false;
            },

            submit : function(stock_id) {
                document.location = "/graphs/" + stock_id;
            }
        }
    }
</script>

Answer 1

您可以将盒子的藏身时间推迟到click开火之前

inactivate : function() {
   setTimeout( () => this.active = false, 100)
},

您也可以尝试使用mousedown代替click

<div class="search-result" v-for="result in search_results" v-on:mousedown="submit(result.id)">

我不知道事件的顺序是否确定，但是应该在模糊之前触发鼠标按下。

模糊事件会取消Vue组件中的click事件

1 个答案: