JSFiddle - React, Tailwind, and code Playground

by Aaron Bickle

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="exercise">
  <!-- 1) Show an alert when the Button gets clicked -->
  <div>
    <button v-on:click="alert">Show Alert</button>
  </div>
  <!-- 2) Listen to the "keydown" event and store the value in a data property (hint: event.target.value gives you the value) -->
  <div>
    <input v-on:keydown="storeKey" type="text">
    <p>{{ value }}</p>
  </div>
  <!-- 3) Adjust the example from 2) to only fire if the "key down" is the ENTER key -->
  <div>
    <input v-on:keydown.enter="storeKey" type="text">
    <p>{{ value }}</p>
  </div>
</div>

JavaScript

new Vue({
  el: '#exercise',
  data: {
    value: ''
  },
  methods: {
  	alert: function () {
    	alert("Clicked");
    },
    storeKey: function (event) {
    	this.value = event.target.value;
    }
  }
});