JSFiddle - React, Tailwind, and code Playground

by R3oLoN

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 @click="showAlert">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 @keydown="saveDown" 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 @keydown.enter="saveEnter" type="text">
            <p>{{ value }}</p>
        </div>
    </div>

JavaScript

new Vue({
            el: '#exercise',
            data: {
                value: ''
            },
            methods: {
                showAlert() {
                  alert('ALERRRTTT!!!!!!')
              },
              saveDown(event) {
                  this.value = event.target.value
              },
              saveEnter(event) {
                  this.value = event.target.value
              }
            }
        });