Find the JSFiddle here: https://jsfiddle.net/smax/9gtcb87t/
Or use this Code:
HTML:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="exercise">
<!-- 1) Show a "result" of 'not there yet' as long as "value" is not equal to 37 - you can change "value" with the buttons. Print 'done' once you did it -->
<div>
<p>Current Value: {{ value }}</p>
<button @click="value += 5">Add 5</button>
<button @click="value += 1">Add 1</button>
<p>{{ result }}</p>
</div>
<!-- 2) Watch for changes in the "result" and reset the "value" after 5 seconds (hint: setTimeout(..., 5000) -->
<div>
<input type="text">
<p>{{ value }}</p>
</div>
</div>
CSS:
None
JavaScript:
new Vue({
el: '#exercise',
data: {
value: 0
},
computed: {
result: function() {
return this.value == 37 ? 'done' : 'not there yet';
}
},
watch: {
result: function() {
var vm = this;
setTimeout(function() {
vm.value = 0;
}, 5000);
}
}
});