Vue Course - Assignment 2

Events Functionality

by nevkatz

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="exercise">
  <button v-on:click="showAlert">
  Click me
  </button>
 <div id="section-1">
    <input v-on:keydown="store($event)" type="text">
    <p>{{ value }}</p>
  </div>
  <div id="section-2">
    <input v-on:keydown.enter="store($event)" type="text">
  <p>{{ value  }}</p>
</div>

</div>

CSS

button {
  margin-bottom: 20px;
}

JavaScript

new Vue({
   el:"#exercise",
   data:{
     value:''
   },
    methods:{
      store:function(e) {
         this.value = e.target.value;
      },
      showAlert:function(e) {
         alert('Hello there');
      }
  }

});