Find the JSFiddle here: https://jsfiddle.net/smax/q2s3fpku/
Or use this Code:
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="value = $event.target.value">
<p>{{ value }}</p>
</div>
</div>
CSS:
None
JavaScript:
new Vue({
el: '#exercise',
data: {
value: ''
},
methods: {
alertMe: function() {
alert('Alert!');
}
}
});