如何通过HTMX响应修改Alpine.js的showDelete数据状态？

我的应用基于HTMX + AlpineJS + Tailwind技术栈，遇到以下问题：
应用内有一个下拉列表，选中选项后，HTMX会向后端查询所选记录的信息，包括该记录是否可删除。核心要求是必须等后端确认记录可删除后，才显示删除按钮。

我通过Alpine.js定义了x-data="{showDelete : false}"，当下拉选项切换时会将showDelete重置为false，目标是后端通过HTMX确认可删除时，将showDelete设为true。

页面核心代码如下：

<div x-data="{showDelete : false}"> <!-- 目标是修改此值 -->
  <select x-model="currentRecord" id="recordSelector" name="recordId"
          x-on:deleteOK="showDelete = true" 
          x-on:change="showDelete = false"
          hx-get="/api/records/deletestatus" hx-trigger="click changed" hx-target="#deleteable" hx-swap="outerHTML"
          hx-get="/api/records/list" hx-trigger="load">
    <!-- HTMX在页面加载时填充所有记录选项 -->
    <option value="-1" id="recordOption">Choose a record for more info...</option>
  </select>

  <!-- 下拉选项变更时HTMX返回的div -->
  <div id="deleteable" :class="showDelete ? 'inline' : 'hidden'">
    <button type="button" id="deleteButton" hx-post="/api/records/78453/delete">Delete Record</button>
  </div>
</div>


<script>
    // 此函数会因HTMX的HX-Trigger-After-Swap头触发
    // 但无法修改上方的showDelete参数
    document.body.addEventListener('deleteConfirmed', function(evt) {
        console.log(evt);
        document.getElementById('recordSelector').dispatchEvent(new CustomEvent('deleteOK'));
        // Alpine.data('showDelete', () => {showDelete = true});
    })
</script>

#deleteable是HTMX的响应内容，后端返回时会附带HX-Trigger-After-Swap头，值设为deleteConfirmed。该头确实能触发底部的监听函数（已通过控制台输出确认），但无法触发select元素中的deleteOK函数。我尝试用Alpine.data()直接修改数据值，但也未成功。我认为无需额外函数，修改单个Alpine数据点应该很简单，请问该如何解决？

注：为何需要showDelete？直接让HTMX返回空div不行吗？原因是当返回可删除的记录且按钮显示后，切换新记录时，在HTMX新响应返回前，旧的删除按钮会残留，而新选中的记录可能不可删除，这存在风险（虽后端会验证输入，但仍需避免显示该按钮）。

方法1：直接通过Alpine全局API修改组件数据 #

Alpine提供了Alpine.$data(el)方法，可直接获取指定元素对应的Alpine数据实例，直接修改showDelete：

document.body.addEventListener('deleteConfirmed', function(evt) {
    // 定位到包含x-data的容器div
    const alpineContainer = document.querySelector('[x-data*="showDelete"]');
    if (alpineContainer) {
        const data = Alpine.$data(alpineContainer);
        data.showDelete = true;
    }
})

这种方式无需依赖自定义事件，直接定位组件实例修改数据，逻辑最简洁。

方法2：修复自定义事件触发逻辑 #

之前deleteOK事件无效，是因为自定义事件默认不冒泡，而Alpine的x-on监听需要事件能到达目标元素。触发事件时添加bubbles: true参数即可：

document.body.addEventListener('deleteConfirmed', function(evt) {
    const selector = document.getElementById('recordSelector');
    selector.dispatchEvent(new CustomEvent('deleteOK', { bubbles: true }));
})

如果想更稳妥，也可以把x-on:deleteOK="showDelete = true"绑定到外层的div容器上，确保事件能被捕获。

方法3：让HTMX响应直接修改Alpine状态 #

后端返回#deleteable的HTML时，直接通过x-init指令修改父组件的状态：

<div id="deleteable" x-init="$parent.showDelete = true">
    <button type="button" id="deleteButton" hx-post="/api/records/78453/delete">Delete Record</button>
</div>

这种方式不需要额外的事件监听代码，完全贴合HTMX与Alpine的协作模式，在内容替换完成后自动触发状态修改。

额外优化说明 #

当前代码中x-on:change="showDelete = false"已经能在切换选项时立即隐藏按钮，避免旧按钮残留，配合上述任一方法都能满足核心需求。

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