Блог

У меня есть следующий код на веб-странице:

 lt;div class="cc-input-cont" x-data="{ count: 0 }"gt; lt;input type="number" name="passengers" id="passengers" class="w-full" required min="1" max="12" :value="count"gt; lt;input type="button" value=" " class="button-plus p-5" data-field="quantity" x-on:click="count  "gt;  

Нажатие на кнопку увеличивает значение ввода на единицу каждый раз, используя Alpine.js встроенные функции. Это работает так, как я хочу.

Чего я не могу понять, так это как заставить его соблюдать максимальное значение (12). Нажатие на кнопку просто продолжает увеличивать число, превышающее максимально допустимое значение.

Мне это удалось с помощью следующих:

 lt;div class="cc-input-cont" x-data="{ pax: 4 }"gt; lt;input type="button" value="-" class="button-minus p-5" data-field="quantity"x-on:click="pax--;if(pax lt; 1){pax = 1;}"gt; lt;input type="number" name="passengers" id="passengers" class="w-full" required min="1" max="12" :value="pax"gt; lt;input type="button" value=" " class="button-plus p-5" data-field="quantity" x-on:click="pax  ;if(pax gt; 12){pax = 12;}"gt;