How to track keypress globally, Vue.js?

Question

JavaScript

<template>
    <div class="container" @keyup.191="searchFocus">
        <Loader v-if="isLoading"/>
        <div class="row">
            <div class="col-md-2">
                <div>
                    <strong>Поиск</strong>
                    <input type="text" v-model="search" class="form-control" ref="searchInput"
                    placeholder="'/' чтобы начать">
                </div>
                <div class="mt-3">
                    <strong>Фильтры</strong>
                    <div>
                        <u>Возраст</u>
                    </div>
                    <ul>
                        <li>
                            <input type="checkbox" id="less_18" v-model="less_18">
                            <label for="less_18">До 18</label>
                        </li>
                        <li>
                            <input type="checkbox" id="more_18" v-model="more_18">
                            <label for="more_18">После 18</label>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-8">
                // Kontent
            </div>
            <div class="col-md-2">
                <h4>Новый пользователь</h4>
                <button type="button" class="btn btn-primary"
                        data-toggle="modal" data-target="#addModal">
                    <i class="fa fa-plus"></i>
                    Добавить
                </button>
            </div>
        </div>
    </div>
</template>

There is an input for user search with ref="searchInput", I want that if I press the - / key on the page, 191 code, then the input is focused, how to do this?

Answer 1

In a component with a search field in the mount event, hang a native js event listener directly on document. In beforeDestroy do not forget to unhook.
Then if there is an appropriate component on the page, everything will work. If not, there will be no errors.