Vuejs counter condition not working when value is reset - vue.js

Question

I'm trying to implement a datepicker where you flick through the months.
The objective is to reset the month counter when it reaches -1 or 11.
Counting up, it works just fine, but counting down it does not reset the value once it reaches -1 and I don't understand why.
<template>
<div id="app">
<button #click="count(1)">Count up</button>
<button #click="count(-1)">Count down</button>
<button #click="reset">reset</button>
<div>Value: {{ value }}</div>
</div>
</template>
methods: {
reset(){ this.value = 5 },
count(num) {
var x = this.value + num;
console.log(x)
if (x < 0) {
this.value = 11;
}
if (x > 11) {
this.value = 0;
} else {
this.value = x;
}
}
},
data() {
return {
value: 5,
};
},
Here's the code sandbox

Answer 1

Update your code to
if (x < 0) {
this.value = 11;
} else if (x > 11) {
this.value = 0;
} else {
this.value = x;
}
And it will work :)
The reason is that for now when the value is less than 0 it enters the first condition (if (x < 0)) and then it still enters the else so this.value is set to x.