如何在vue-instantsearch中检测是否关注了搜索输入？

Question

在我的组件Search.vue中，我需要检测搜索输入是否聚焦，以便在光标位于其他地方时隐藏搜索结果

我使用了 vue-instantsearch

以下是我的客户组件模板部分的代码

<template>
    <ais-index index-name="getstarted_actors" :search-store="searchStore">
        <div class="col-md-10 col-sm-9">
            <ais-search-box :autofocus="true">
                <div class="input-group" ref="searchInputGroup">
                    <ais-input placeholder="Find books..."
                               :class-names="{'ais-input': 'form-control'}" autofocus="true" >
                    </ais-input>
                    <span class="input-group-btn">
                            <ais-clear :class-names="{'ais-clear': 'btn btn-default'}">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            </ais-clear>
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </span>
                </div>
            </ais-search-box>
            <ais-results v-show="searchStore.query.length > 0">
                <template scope="{ result }">
                    <div v-on:click="searchResultClick(result)" class="found-item">
                        <a> <span>{{ result.name }}</span> <span>{{ result.rating }}</span></a><br/>
                    </div>
                </template>
            </ais-results>
        </div>

    </ais-index>
</template>

Answer 1

您可以尝试：

<ais-input placeholder="Find books..."
           :class-names="{'ais-input': 'form-control'}" autofocus="true" 
           @focus="onFocus"
>
</ais-input>

和你的方法：

methods: {
  onFocus() { console.log('Focused') }
}