JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

<script src="https://www.unpkg.com/vue"></script>

<div id="exercise">
  
  <div>
    <p>
      Current Value: {{ value }}
    </p>
    <button @click="increase(5)">
      Add 5
    </button>
    <button @click="increase(1)">
      Add 1
    </button>
    <p>
      {{ result }}
    </p>
  </div>
  <div>
    <input type="text">
    <p>
      {{ value }}
    </p>
  </div>
  
  
</div>

JavaScript

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