Обнаружение кнопки клавиатуры и воспроизведение звука в vue.js

Question

Приведенный ниже код фактически воспроизводит звуки при каждом нажатии кнопки с помощью vue.js.

Как можно обнаружить нажатие клавиатуры и воспроизведение звука, когда DOM готов, а не при нажатии кнопок?

например, при входном воспроизведении звука v-on:keyup.13="playSound('path/to/mp3')"

В документации Vue в основном объясняются атрибуты html, возможно, это то, что должно быть сделано в JS, я полагаю.Я новичок в Vue.js

Документация Vue.js по Модификаторы событий

См. codepen .

new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    playSound (sound) {
      if(sound) {
        var audio = new Audio(sound);
        audio.play();
      }
    }
  }
});

Answer 1

Когда вы нажимаете клавишу, событие клавиатуры запускается с активного элемента и всплывает вверх. Поэтому, если вы хотите обрабатывать все нажатия клавиш независимо от того, какой элемент находится в фокусе, вам нужно будет вручную зарегистрировать слушателя в коде, например, document.

new Vue({
  el: '#app',
  created() {
    this.onKeyDown = this.onKeyDown.bind(this);
    document.addEventListener('keydown', this.onKeyDown);
  },
  destroyed() {
    document.removeEventListener('keydown', this.onKeyDown);
  },
  methods: {
    playSound (sound) {
      if(sound) {
        var audio = new Audio(sound);
        audio.play();
      }
    },
    onKeyDown(e) {
      switch (e.keyCode) {
        case 65: this.playSound(sound1); break; // 'a' key
        case 66: this.playSound(sound2); break; // 'b' key
      }
    },
  }
});

Codepen