如何为 Alpine.JS 中的变量设置 min/max 值

Question

我在网页中有以下代码：

<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++">

使用 Alpine.js 内置函数，每次单击按钮都会将输入值递增 1。这如我所愿。

我无法解决的是如何让它尊重最大值 (12)。单击该按钮只会使数字不断增加，超过最大允许值。

Answer 1

我用以下方法管理它：

<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;}">

如何为 Alpine.JS 中的变量设置 min/max 值

How to set min/max values for a variable in Alpine.JS

javascript

alpine.js