vue.js - Watching for changes

by Rodwyn Moreno

HTML

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

<div id="app">
  <div>
    <button v-on:click="counter++">Increase</button>
    <button v-on:click="counter--">Decrease</button>
  </div>
  
  <p>Counter: {{ counter }}</p>
  <p>Result: {{ result }}</p>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	counter: 0,
    result: ''
  },
  watch: {
  	counter: function(value) {
    	var vm = this;
      vm.result = vm.counter > 5 ? 'Greater than 5' : 'Smaller than 5';
    }
  }
});