如何在HTMX请求响应后更新Alpine.js数据变量？

在表单中结合HTMX与Alpine.js开发时，遇到HTMX事件无法更新Alpine.js数据变量的问题。相关代码如下：

<form x-data="{submitted: false}" @submit.prevent="submitted = true" hx-on:htmx:after-request="submitted = false" hx-post hx-swap="none">

    {% csrf_token %}
    <p x-text="submitted"></p>

    {% include "style-guide/components/input.html" with form=form name="email" label="Email" placeholder="Email" %}

    <div id="password1"></div>

    <button type="submit" class="mt-4 btn bg-gradient-primary w-100" :disabled="submitted">
          Authenticate
      <i x-show="submitted" class="fa-solid fa-spinner fa-spin ms-2"></i>
    </button>
</form>

提交表单时，通过@submit.prevent将submitted设为true，以此禁用按钮并显示加载动画。但尝试用hx-on:htmx:after-request="submitted = false"在HTMX响应完成后重置submitted为false时无效——替换为alert('submitted')能正常执行，但就是无法更新Alpine的变量。

核心问题是HTMX事件回调的作用域无法直接访问Alpine组件的内部变量，以下是几种可行的解决方式：

方式1：通过自定义事件传递状态 #

让HTMX完成请求后触发一个自定义事件，再让Alpine监听这个事件来更新变量：

<form x-data="{submitted: false}" 
      @submit.prevent="submitted = true" 
      hx-on:htmx:after-request="$dispatch('reset-submitted')"
      @reset-submitted="submitted = false"
      hx-post hx-swap="none">

    {% csrf_token %}
    <p x-text="submitted"></p>

    {% include "style-guide/components/input.html" with form=form name="email" label="Email" placeholder="Email" %}

    <div id="password1"></div>

    <button type="submit" class="mt-4 btn bg-gradient-primary w-100" :disabled="submitted">
          Authenticate
      <i x-show="submitted" class="fa-solid fa-spinner fa-spin ms-2"></i>
    </button>
</form>

方式2：直接获取Alpine实例修改变量 #

利用Alpine全局APIAlpine.$data()获取当前表单的组件实例，直接修改submitted变量：

<form x-data="{submitted: false}" 
      @submit.prevent="submitted = true" 
      hx-on:htmx:after-request="Alpine.$data(this).submitted = false"
      hx-post hx-swap="none">

    {% csrf_token %}
    <p x-text="submitted"></p>

    {% include "style-guide/components/input.html" with form=form name="email" label="Email" placeholder="Email" %}

    <div id="password1"></div>

    <button type="submit" class="mt-4 btn bg-gradient-primary w-100" :disabled="submitted">
          Authenticate
      <i x-show="submitted" class="fa-solid fa-spinner fa-spin ms-2"></i>
    </button>
</form>

方式3：将逻辑封装到Alpine方法中 #

把提交和后续的重置逻辑都放到Alpine的方法里，确保作用域正确：

<form x-data="{
    submitted: false,
    handleSubmit() {
        this.submitted = true;
        // 手动触发HTMX请求并监听完成状态
        htmx.process(this.$el).then(() => {
            this.submitted = false;
        });
    }
}" 
@submit.prevent="handleSubmit"
hx-post hx-swap="none">

    {% csrf_token %}
    <p x-text="submitted"></p>

    {% include "style-guide/components/input.html" with form=form name="email" label="Email" placeholder="Email" %}

    <div id="password1"></div>

    <button type="submit" class="mt-4 btn bg-gradient-primary w-100" :disabled="submitted">
          Authenticate
      <i x-show="submitted" class="fa-solid fa-spinner fa-spin ms-2"></i>
    </button>
</form>

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