Search code examples
javascriptvue.jsbuttonvuejs2click

Vue js- Hide minus button when the value reaches 0 and unhide plus button in

The idea is when the minus button is clicked until 0, I need to hide the minus button and then unhide the plus button to add the value again. What I have tried here I managed to make the minus and plus function. Anyone can help I'm still new in vuejs.

<template>
  <div class="message"># {{ count }}<br>
    <p># {{ count }}</p>
    <button v-on:click.prevent="increment">+</button>
    <button v-on:click.prevent="decrement">-</button>
  </div>
</template>
    
<script>
export default {
  data: ()=> {
    return {
      count: 5
    }
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      if(this.count > 0) {
        this.count-- ;
      }
    }
  }
}
</script>
Solution

  • You can do this to hide the - when the value is 0:

    <button v-if="count > 0" v-on:click.prevent="decrement">-</button>