CODEWITHSUNDEEP
javascriptvue.jsecmascript-6vue-component
spøjst
spøjst

Reputation: 151

Key event doesn't fire in Vue component

I'm trying to make an eventlistener that shows an alert message if the user has pressed on a keyboard key of my choosing.

My project is a basic Vue instance using the CDN link. I would imagine that my code so far would work in the javascript alone without declaring anything in the html, but i might be wrong.

If tried to combine a few answers here from this site, but so far, I've still not been able to come up with a solution that works. I suppose my question is; can anyone tell me why the below snippet doesn't work?

created() {
    window.addEventListener('keyup', (e) => {
      if (e.key == 'Escape') {
        alert("Hello")
      }
    })
}

Here's a snippet:

new Vue ({
    el: '#app',
    data: {
        name: ''
    },
    methods: {

       /* created() {
            document.keyup = function(event) {
                switch (event.keyCode) {
                    case 13:
                        this.crash()
                        break;
                        case 65:
                            this.kick()
                        break;
                }
            }
        },*/

        mounted() {
            window.addEventListener('keyup', (e) => {
              if (e.key == 'Escape') {
                alert("HEJ")
              }
            })
        },

        destroy() {
            window.removeEventListener('keyup', (e) => {
              if (e.key == 'Escape') {
                alert("HEJ")
              }
            })
        },



        


    }
})
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <title>Drum Kit</title>
</head>
<body>
    
    <div class="container" id="app">

        <div class="intro">
        <img class="logo" src="\Drum Kit Starting Files\images\logo.png" alt="">
        <p class="start">Press the keys from 1-7 and get groovin'!</p>
        <p>But first, let me get your name:</p>
        <input class="input" v-model="name">  <!-- Two way data binding (v-model) -->
        <input>

        <div class="message">
        <p v-if="name">This is &nbsp;</p>    
        <p class="name">{{ name }} </p>
        <p v-if="name">'s&nbsp; personal drum kit!</p>
        </div>
        </div>

    <script src="main.js"></script>
</body>
</html>

Upvotes: 1

Views: 319

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37923

Move mounted and destroy hooks from the methods object and it will work...

new Vue({
  el: '#app',
  data: {
    name: ''
  },
  mounted() {
    window.addEventListener('keyup', (e) => {
      if (e.key == 'Escape') {
        alert("HEJ")
      }
    })
  },
  destroy() {
    window.removeEventListener('keyup', (e) => {
      if (e.key == 'Escape') {
        alert("HEJ")
      }
    })
  },
})
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <title>Drum Kit</title>
</head>

<body>

  <div class="container" id="app">

    <div class="intro">
      <img class="logo" src="\Drum Kit Starting Files\images\logo.png" alt="">
      <p class="start">Press the keys from 1-7 and get groovin'!</p>
      <p>But first, let me get your name:</p>
      <input class="input" v-model="name">
      <!-- Two way data binding (v-model) -->
      <input>

      <div class="message">
        <p v-if="name">This is &nbsp;</p>
        <p class="name">{{ name }} </p>
        <p v-if="name">'s&nbsp; personal drum kit!</p>
      </div>
    </div>

    <script src="main.js"></script>
</body>

</html>

Upvotes: 2

Related Questions