[2 Minutes Maggi] Vue.js Snippet — Simple Counter in 20 lines of JavaScript!

Today I am sharing a simple snippet which may help you with getting started in your Vue.js Journey. Enjoy!

What does the counter do?

1. Simple Counter in Vue.js with Increase, Decrease and Reset buttons:

• Increase button will increase the counter until it crosses the limit. When it crosses the limit, it will stop. Currently set to 20 in the demo.
• Decrease button will decrease the counter until it crosses the limit. When it crosses the limit, it will stop. Currently set to 0 in the demo.
• Reset button will reset the counter to 0

2. Computed property to show the output as per the current value:

• If the counter is less than 10, It will show less than 10
• If the counter is 10 or more, it will show 10 or more.

Here is the Snippet!

new Vue({
  el: '#app-root',
  data: { counter: 0, result: '' }, // Initial Value
  methods: {
    increaseCounter(increaseLimit) { // Increase
      if (this.counter < increaseLimit) 
        this.counter++;
    },
    decreaseCounter(decreaseLimit) { // Decrease
      if (this.counter > decreaseLimit) 
        this.counter--;
    }, 
    resetCounter() { // Reset
      this.counter = 0;
    }
  },
  computed: {
    output() { // Output for computed property!
      return this.counter >= 10 ? '10 or more' : 'Less than 10';
    }
  }
});

And, Here is the demo!