I have the following code in a web page:
<div class="cc-input-cont" x-data="{ count: 0 }">
<input type="number" name="passengers" id="passengers" class="w-full" required min="1" max="12" :value="count">
<input type="button" value="+" class="button-plus p-5" data-field="quantity" x-on:click="count++">
Clicking on the button increments the value of the input by one each time using Alpine.js inbuilt functions. This works as I want.
What I can't work out is how to make it respect the maximum value (12). Clicking the button just keeps incrementing the number past the maximum allowed value.
I managed it with the following:
<div class="cc-input-cont" x-data="{ pax: 4 }">
<input type="button" value="-" class="button-minus p-5" data-field="quantity"x-on:click="pax--;if(pax < 1){pax = 1;}">
<input type="number" name="passengers" id="passengers" class="w-full" required min="1" max="12" :value="pax">
<input type="button" value="+" class="button-plus p-5" data-field="quantity" x-on:click="pax++;if(pax > 12){pax = 12;}">