Vue

by santalks80

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" v-model="duration">
    <p>{{ value }}</p>
  </div>
</div>

Vue

new Vue ({
el: '#exercise',
data: {
value: 0,
duration: 5000
},
computed: {
result: function(event){
return this.value < 37 ? 'not there yet' : 'done'
}
},
watch: {
result: function(value){
var vm=this;
setTimeout(function(){
vm.value=0 },this.duration);
}
}

});