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); } } });