Vue Js keydown Event Example

Vue js keydown event example; Through this tutorial, i am going to show you how to use keydown event in vue js app.

VUE JS KeyDown Event Example

The following example is for keydown event in vue js:

<!DOCTYPE html>
<html>
<head>
  <title>Vue js</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5>Vue Js keydown Event Example</h5>
        </div>
        <div class="card-body">
          <div id="app">
            <p>
                {{ keywords }}
            </p>
            <input type="text" placeholder="Enter KeyWords" :value="keywords" class="form-control" @keydown="queryForKeywords">
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>  
new Vue({
  el: "#app",
  data: {
    keywords: ''
  },
  methods: {
     queryForKeywords(event) {
       const value = event.target.value
        this.keywords = value
           alert('you are enter some key!!');
    }
  }
})  
</script>
</body>
</html>

The following code will

<script>  
new Vue({
  el: "#app",
  data: {
    keywords: ''
  },
  methods: {
     queryForKeywords(event) {
       const value = event.target.value
        this.keywords = value
           alert('you are enter some key!!');
    }
  }
})  
</script>

Conclusion

Vue js keydown event example tutorial. In this tutorial, you have learned how to use keydown event in vue js app.

Recommended VUE JS Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.