如何在Alpine.js中为变量设置最小/最大值，限制数值不超出范围

HTML 原生input标签的min、max属性仅会触发表单提交校验、手动输入数值校验，不会限制通过 JavaScript 动态修改的变量值，因此直接count++会超出预设范围，可使用以下任意一种方案解决：

方案1：直接修改点击事件逻辑（最简实现） #

直接在加一逻辑中增加最大值判断，同时可同步补充最小值限制适配你的min="1"要求：

<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 = Math.min(count + 1, 12)">
  <!-- 若后续新增减号按钮，逻辑可写为 count = Math.max(count - 1, 1) -->
</div>

方案2：复用原生input属性（易维护） #

如果后续可能调整max、min的数值，不想同时修改属性和点击逻辑两处代码，可以通过x-ref获取input的属性值做判断：

<div class="cc-input-cont" x-data="{ count: 0 }">
  <input x-ref="passengerInput" 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 = Math.min(count + 1, parseInt($refs.passengerInput.max))">
</div>

方案3：全局数值范围校验（适配手动输入场景） #

如果允许用户直接在输入框中填写数值，可增加x-effect全局修正逻辑，不管是点击按钮还是手动输入，数值都会自动落在合法区间：

<div class="cc-input-cont" x-data="{ count: 0 }" x-effect="count = Math.max(1, Math.min(count, 12))">
  <input type="number" name="passengers" id="passengers" class="w-full" required min="1" max="12" x-model="count">
  <input type="button" value="+" class="button-plus p-5" data-field="quantity" x-on:click="count++">
</div>

内容的提问来源于stack exchange，提问作者Al_