Как глобально отследить нажание на клавишу, Vue.js?

Question

[Dmitriy]

<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>

Есть инпут для поиска пользователя с ref="searchInput", я хочу чтобы если я нажму на странице клавишу - /, 191 code, то чтобы инпут фокусировался, как это сделать?

Answer 1

[Антон Антон]

В компоненте с полем поиска в событии mount навесить нативный js'овский event listener прямо на document. В beforeDestroy не забыть отцепить.
Тогда если на станице есть соответствующий компонент - всё будет работать. Если нет - не будет ошибок.

Answer 2

[0xD34F]

methods: {
  onKeyPress(e) {
    if (/* нажато что надо */) {
      this.$refs.searchInput.focus();
    }
  },
},
created() {
  document.addEventListener('keypress', this.onKeyPress);
  this.$on('hook:beforeDestroy', () => document.removeEventListener('keypress', this.onKeyPress));
},

Comments

[origami1024]

this.$on('hook:beforeDestroy', () => document.removeEventListener('keypress', this.onKeyPress))

Какие приемущества такой записи по сравнению с просто объявлением beforeDestroy() {} по соседству с created() {}?

[0xD34F]

origami1024, код, относящийся к одной задаче, меньше размазывается между несколькими функциями.