在 alpine.js 中单击事件后触发更改事件答案

【问题标题】：Trigger change event after click event in alpine.js在 alpine.js 中单击事件后触发更改事件
【发布时间】：2020-11-07 19:30:06
【问题描述】：

在以下示例中，当单击选择元素并更改值时，textarea 值设置为空。

我也有更改选择值的按钮，但这不会触发更改事件并将 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上的change事件，不管是按钮触发还是直接改变select值？

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

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>

【讨论】：