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>
You can do this to hide the - when the value is 0:
<button v-if="count > 0" v-on:click.prevent="decrement">-</button>
v-if will render an element if the statement inside is true. And v-show will always render the element but won't show it unless the statement inside is true.
So if you use v-if="count > 0" or v-show="count > 0" on the minus button like so, you should achieve your goal.
<button v-if="count >= 0" v-on:click.prevent="decrement">-</button>
Likewise, if you have a maximum value you don't want to exceed, you can use v-if="count < max_value" or v-show="count < max_value" to hide the increment button when the count is maxed out.
Hope this helps :) For more information you can read the docs here: https://vuejs.org/v2/guide/index.html#Conditionals-and-Loops
You can use v-show directive based on count value:
new Vue({
el: '#app',
data: () => {
return {
count: 5
}
},
methods: {
increment() {
this.count++;
},
decrement() {
if (this.count > 0) {
this.count--;
}
}
}
})<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<div id="app">
<div class="message">
<p># {{ count }}</p>
<button v-show="count >= 0" v-on:click.prevent="increment">+</button>
<button v-show="count > 0" v-on:click.prevent="decrement">-</button>
</div>
</div>