在 alpine.js 中单击事件后触发更改事件
Trigger change event after click event in alpine.js
在以下示例中,当单击 select 元素并更改值时,textarea 值设置为空。
我也有更改 select 值的按钮,但这不会触发更改事件并将 textarea 值设置为空。
<div x-data="{ select : 1, textarea : 'test' }">
<div>
<button x-on:click="select = 1">One</button>
<button x-on:click="select = 2">Two</button>
<button x-on:click="select = 3">Three</button>
</div>
<div>
<select name="test" x-model="select" x-on:change="textarea = ''">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<textarea name="foobar" x-model="textarea">test</textarea>
</div>
我可以通过更新每个按钮上的点击事件来使它正常工作,如下所示。
<button x-on:click="select = 1; textarea = ''">One</button>
有没有办法触发select上的改变事件,不管是按钮触发还是直接改变select值?
x-model
将在不触发“更改”事件的情况下更新值。
在您的情况下,我假设您希望“每当 select
更改时,将 textarea 值重置为 ''
”。
您可以使用 x-init
和 $watch('select', () => { textarea = '' })
来完成。作为奖励,您不再需要 <select>
上的 x-on:change="textarea = ''"
。
完整示例为:
<div
x-data="{ select : 1, textarea : 'test' }"
x-init="$watch('select', () => { textarea = '' })"
>
<div>
<button x-on:click="select = 1">One</button>
<button x-on:click="select = 2">Two</button>
<button x-on:click="select = 3">Three</button>
</div>
<div>
<select name="test" x-model="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<textarea name="foobar" x-model="textarea">test</textarea>
</div>
在以下示例中,当单击 select 元素并更改值时,textarea 值设置为空。
我也有更改 select 值的按钮,但这不会触发更改事件并将 textarea 值设置为空。
<div x-data="{ select : 1, textarea : 'test' }">
<div>
<button x-on:click="select = 1">One</button>
<button x-on:click="select = 2">Two</button>
<button x-on:click="select = 3">Three</button>
</div>
<div>
<select name="test" x-model="select" x-on:change="textarea = ''">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<textarea name="foobar" x-model="textarea">test</textarea>
</div>
我可以通过更新每个按钮上的点击事件来使它正常工作,如下所示。
<button x-on:click="select = 1; textarea = ''">One</button>
有没有办法触发select上的改变事件,不管是按钮触发还是直接改变select值?
x-model
将在不触发“更改”事件的情况下更新值。
在您的情况下,我假设您希望“每当 select
更改时,将 textarea 值重置为 ''
”。
您可以使用 x-init
和 $watch('select', () => { textarea = '' })
来完成。作为奖励,您不再需要 <select>
上的 x-on:change="textarea = ''"
。
完整示例为:
<div
x-data="{ select : 1, textarea : 'test' }"
x-init="$watch('select', () => { textarea = '' })"
>
<div>
<button x-on:click="select = 1">One</button>
<button x-on:click="select = 2">Two</button>
<button x-on:click="select = 3">Three</button>
</div>
<div>
<select name="test" x-model="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<textarea name="foobar" x-model="textarea">test</textarea>
</div>