HTMX + AlpineJS + Tailwind。我想我想多了一些很简单的东西...
我的应用程序有一个下拉列表，在从下拉列表中选择后，HTMX会查询后端有关所选记录的一些信息，包括是否可以删除它。在后端确认所选记录可以安全删除之前，不要显示DELETE按钮，这一点非常重要。
在Alpine.js中，我们定义了x-data="{showDelete : false}"，并在主下拉列表中的选择发生变化时将其重置为false。我们的目标是在后端确认（通过HTMX）删除操作可以时将其重置为TRUE。
页面的骨骼如下所示：

<div x-data="{showDelete : false}"> <!-- goal is to change this -->
  <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 fills in all the record options below on page load -->
    <option value="-1" id="recordOption">Choose a record for more info...</option>
  </select>

  <!-- this div returned by HTMX when select option changes -->
  <div id="deleteable" :class="showDelete ? 'inline' : 'hidden'">
    <button type="button" id="deleteButton" hx-post="/api/records/78453/delete">Delete Record</button>
  </div>
</div>

<script>
    // this function does run, due to HTMX's HX-Trigger-After-Swap header
    // but cannot change the showDelete paramter above
    document.body.addEventListener('deleteConfirmed', function(evt) {
        console.log(evt);
        document.getElementById('recordSelector').dispatchEvent(new CustomEvent('deleteOK'));
        // Alpine.data('showDelete', () => {showDelete = true});
    })
</script>

#deleteable div是HTMX响应，其中还包括设置为deleteConfirmed的头HX-Trigger-After-Swap。（通过控制台输出确认），但没有触发select元素中的deleteOK函数。我尝试直接使用Alpine.data()更改数据值，但无法使其生效。我认为使用一个单独的函数可能是矫枉过正，它应该是很容易改变一个阿尔卑斯山的数据点，对不对？
注意事项：如果HTMX返回的是div，我们为什么还需要showDelete呢？只要返回一个空的div就行了，对吗？问题是当返回一个可删除的记录，并且按钮是可见的时候--我们仍然需要删除按钮的选项。例如，当选择一个新记录时，但在返回新的HTMX响应之前，我们会有一个孤立的DELETE按钮，现在这个按钮特别危险，因为已经选择了一个可能不安全删除的新记录。（是的，我们验证了服务器上的所有输入，但仍然不希望有一个DELETE按钮）。