HTMX 和 AlpineJS 在监听选择变更事件时发生冲突。

huangapple
go评论94阅读模式
英文:

HTMX and AlpineJS conflicting on listening for a select change event

问题

我正在尝试让HTMX和AlpineJS一起在选择元素上工作，我的期望是：

  • 当用户更改选择值时，它调用/v2/Url?param=value&selectId=1。

实际发生的情况是：

  • 它调用URL而不附加selectId查询参数：/v2/Url?param=value。

我认为最好的代码如下：

  1. <select 
  2.     name="selectId" 
  3.     id="selectId"
  5.     hx-get="/v2/Url?param=value&amp;selectId=1"
  6.     hx-target="#targetId" 
  8.     x-data="{ disabled: false }"
  9.     x-bind:disabled="disabled" 
  10.     x-on:change="disabled = true" 
  11.     x-on:htmx:after-on-load="disabled = false">
  13.     <option value="1">Item 1</option>
  14.     <option value="2">Item 2</option>
  15.     <option value="3">Item 3</option>
  16. </select>
  18. <div id="targetId">
  20. </div>

当我删除x-on:change="disabled = true"时，HTMx工作正常，但当我添加它时，似乎HTMx停止监听change事件。

英文:

I'm trying to make HTMX and AlpineJS work together on a select element, what I expect:

  • When user change select value it calls /v2/Url?param=value&amp;selectId=1

What happens:

  • It calls the url without appending selectId query parameter: /v2/Url?param=value

Best code that I can think of:

  1. &lt;select 
  2.     name=&quot;selectId&quot; 
  3.     id=&quot;selectId&quot;
  5.     hx-get=&quot;/v2/Url?param=value&quot;
  6.     hx-target=&quot;#targetId&quot; 
  8.     x-data=&quot;{ disabled: false }&quot;
  9.     x-bind:disabled=&quot;disabled&quot; 
  10.     x-on:change=&quot;disabled = true&quot; 
  11.     x-on:htmx:after-on-load=&quot;disabled = false&quot;&gt;
  13.     &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
  14.     &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
  15.     &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
  16. &lt;/select&gt;
  19. &lt;div id=&quot;targetId&quot;&gt;
  21. &lt;/div&gt;

When I remove the x-on:change=&quot;disabled = true&quot; HTMx works fine, but when I add it, looks like HTMx stop listening for the change event.

答案1

得分: 1

根据@Alejandro的评论，我能够使用alpine的$nextTick函数解决这个问题，最终的代码如下：

  1. <select 
  2.     name="selectId" 
  3.     id="selectId"
  5.     hx-get="/v2/Url?param=value"
  6.     hx-target="#targetId" 
  8.     x-data="{ disabled: false }"
  9.     x-bind:disabled="disabled" 
  10.     x-on:change="$nextTick(() => disabled = true)"
  11.     x-on:htmx:after-on-load="disabled = false">
  13.     <option value="1">Item 1</option>
  14.     <option value="2">Item 2</option>
  15.     <option value="3">Item 3</option>
  16. </select>
  19. <div id="targetId">
  21. </div>
英文:

Following @Alejandro comment I was able to solve this issue using alpine $nextTick function, final code:

  1. &lt;select 
  2.     name=&quot;selectId&quot; 
  3.     id=&quot;selectId&quot;
  5.     hx-get=&quot;/v2/Url?param=value&quot;
  6.     hx-target=&quot;#targetId&quot; 
  8.     x-data=&quot;{ disabled: false }&quot;
  9.     x-bind:disabled=&quot;disabled&quot; 
  10.     x-on:change=&quot;$nextTick(() =&gt; disabled = true)&quot;
  11.     x-on:htmx:after-on-load=&quot;disabled = false&quot;&gt;
  13.     &lt;option value=&quot;1&quot;&gt;Item 1&lt;/option&gt;
  14.     &lt;option value=&quot;2&quot;&gt;Item 2&lt;/option&gt;
  15.     &lt;option value=&quot;3&quot;&gt;Item 3&lt;/option&gt;
  16. &lt;/select&gt;
  19. &lt;div id=&quot;targetId&quot;&gt;
  21. &lt;/div&gt;

huangapple
  • 本文由 发表于 2023年7月20日 20:16:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76729763.html
  • alpine.js
  • htmx
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定