AlpineJS使用x-model触发本机JS事件（woocommerce购物车）

尝试在电子商务结帐中使用AlpineJS。我有带+-指示器的输入数字字段以增加值，simplefield代码：

<div x-data="{ qty: 1 }">
  <i @click="qty = qty > 2 ? qty - 1 : 1" class="icon-left-open"></i>

  <input type="number" x-model="qty">

  <i @click="qty = qty + 1" class="icon-right-open"></i>
</div>

所以问题是，当输入值更改时，“更新购物车”按钮仍处于禁用状态。我认为这是因为x-model和双向绑定不会触发本机更改/输入事件

如何告诉woocommerce该值已更改？

您可以使用$watch“监视”x数据变量

您可以在此处找到有关$watch的更多信息：

例如，它监视“qty”值，如果更改，它将发送“qty\U true”事件

这是一个带有$watch和“qty\u true”事件侦听器的代码版本

<div x-data="{ qty: 1 }" x-init="$watch('qty',value => { if (value) $dispatch('qty_true'); })">
    <i @click="qty = qty > 2 ? qty - 1 : 1" class="icon-left-open"></i>
        
    <input type="number" x-model="qty">
        
    <i @click="qty = qty + 1" class="icon-right-open"></i>
</div>

<script type="text/javascript">
    window.addEventListener( 'qty_true', ( e ) => {
        console.log( 'qty now evaluates to true' );
        // enable your button here
    } );
</script>

window.addEventListener（'qty\u true'，（e）=>{
log（'qty now求值为true'）；
//在此处启用您的按钮
} );

正如@Craig E所指出的，我们需要使用x-init和$watch，但这只是工作的一半，我们还需要将输入更改通知Woocmercec。一种方法是使用这一内衬：

x-init="$watch('qty', () => $refs.qty_input.dispatchEvent(new Event('change', { bubbles: true })))"

我们还应该在目标元素上添加$ref：

x-ref="qty_input"

完整代码：

<div 
  x-data="{ qty: 1 }" 
  x-init="$watch('qty', () => $refs.qty_input.dispatchEvent(new Event('change', { bubbles: true })))">
  <i @click="qty = qty > 2 ? qty - 1 : 1" class="icon-left-open"></i>

  <input type="number" x-ref="qty_input" x-model="qty">

  <i @click="qty = qty + 1" class="icon-right-open"></i>
</div>

<div 
  x-data="{ qty: 1 }" 
  x-init="$watch('qty', () => $refs.qty_input.dispatchEvent(new Event('change', { bubbles: true })))">
  <i @click="qty = qty > 2 ? qty - 1 : 1" class="icon-left-open"></i>

  <input type="number" x-ref="qty_input" x-model="qty">

  <i @click="qty = qty + 1" class="icon-right-open"></i>
</div>