VueJS Exercise 2

by Rushan Sakhibgareev

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 type="text" v-on:keydown="storeValue">
        <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="storeValue2">
        <p>{{ value2 }}</p>
    </div>
</div>

JavaScript

new Vue({
        el: '#exercise',
        data: {
            value: '',
            value2: ''
        },
        methods: {
           showAlert(){
               alert('bebebeb')
           },
           storeValue: function(event){
               this.value = event.target.value;
           },
           storeValue2: function(event){
           if (event.key === "Enter"){
              this.value2 = event.target.value;
           }
           }           
        }
    });