AlpineJS点击按钮提交表单时提交旧值而非新值求助

问题出在AlpineJS的响应式更新是异步的——你执行qty++后，Alpine不会立刻更新DOM绑定的输入框值，同步触发表单提交时，表单拿到的还是更新前的旧值。

给你两个靠谱的解决方法：

方法1：用Alpine的$nextTick等待DOM更新 #

$nextTick会在Alpine完成DOM更新后执行回调，确保提交时拿到最新值：

<input type='button' 
       value='+' 
       class='qtyplus plus' 
       field='quantity' 
       x-on:click="qty++; $nextTick(() => {
           $event.target.form?.dispatchEvent(new Event('submit'));
       })" />

方法2：添加短暂延迟（符合你的需求） #

用setTimeout手动延迟提交，给Alpine足够时间更新DOM：

<input type='button' 
       value='+' 
       class='qtyplus plus' 
       field='quantity' 
       x-on:click="qty++; setTimeout(() => {
           $event.target.form?.dispatchEvent(new Event('submit'));
       }, 100)" />

注意：要确保你的数量输入框已经正确绑定了x-model="qty"，比如：

<input type="number" name="quantity" x-model="qty" />

这样点击按钮后，qty更新，DOM同步完成后再提交，就能拿到最新的数值了。

内容的提问来源于stack exchange，提问作者Dennis van Schaik