JSFiddle - React, Tailwind, and code Playground

by Breno RdV

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="alertMe" >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 type="text" v-on:keydown="value = $event.target.value">
        <p>{{ value }}</p>
    </div>
    <!-- 3) Adjust the example from 2) to only fire if the "key down" is the ENTER key -->
    <div>
        <input type="text" v-on:keydown.enter="store">
        <p>{{ value }}</p>
    </div>
</div>

JavaScript

new Vue({
	el: "#exercise",
  data: {
  	value: ""
  },
  methods: {
  	alertMe: function() {
    	alert("Clicked!");
    },
    store: function(e) {
    	this.value = e.target.value;
    }
  }
});