Tengo el siguiente código en una página web:
<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++">Al hacer clic en el botón, se incrementa el valor de la entrada en uno cada vez que se usan las funciones incorporadas de Alpine.js. Esto funciona como quiero.
Lo que no puedo resolver es cómo hacer que respete el valor máximo (12). Al hacer clic en el botón, el número sigue aumentando más allá del valor máximo permitido.
Lo logré con lo siguiente:
<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;}">