如何在 Alpine.JS 中为变量设置最小/最大值答案

【问题标题】：How to set min/max values for a variable in Alpine.JS如何在 Alpine.JS 中为变量设置最小/最大值
【发布时间】：2021-11-05 05:23:55
【问题描述】：

我在网页中有以下代码：

<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 内置函数，每次单击按钮都会将输入值加一。这如我所愿。

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

【问题讨论】：

标签： javascript alpine.js

【解决方案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;}">

【讨论】：