英文:
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。
我认为最好的代码如下：
<select
name="selectId"
id="selectId"
hx-get="/v2/Url?param=value&selectId=1"
hx-target="#targetId"
x-data="{ disabled: false }"
x-bind:disabled="disabled"
x-on:change="disabled = true"
x-on:htmx:after-on-load="disabled = false">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<div id="targetId">
</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&selectId=1
What happens:
- It calls the url without appending
selectIdquery parameter:/v2/Url?param=value
Best code that I can think of:
<select
name="selectId"
id="selectId"
hx-get="/v2/Url?param=value"
hx-target="#targetId"
x-data="{ disabled: false }"
x-bind:disabled="disabled"
x-on:change="disabled = true"
x-on:htmx:after-on-load="disabled = false">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<div id="targetId">
</div>
When I remove the x-on:change="disabled = true" HTMx works fine, but when I add it, looks like HTMx stop listening for the change event.
答案1
得分: 1
根据@Alejandro的评论，我能够使用alpine的$nextTick函数解决这个问题，最终的代码如下：
<select
name="selectId"
id="selectId"
hx-get="/v2/Url?param=value"
hx-target="#targetId"
x-data="{ disabled: false }"
x-bind:disabled="disabled"
x-on:change="$nextTick(() => disabled = true)"
x-on:htmx:after-on-load="disabled = false">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<div id="targetId">
</div>
英文:
Following @Alejandro comment I was able to solve this issue using alpine $nextTick function, final code:
<select
name="selectId"
id="selectId"
hx-get="/v2/Url?param=value"
hx-target="#targetId"
x-data="{ disabled: false }"
x-bind:disabled="disabled"
x-on:change="$nextTick(() => disabled = true)"
x-on:htmx:after-on-load="disabled = false">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<div id="targetId">
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论