JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

JavaScript

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