web-dev-qa-db-ja.com

Alpine.jsの[イベント]の後にイベントの切り替えイベントをトリガー変更します

次の例では、選択要素をクリックして値を変更するときに、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>
 _

選択されたイベントを選択する方法は、ボタンでトリガーされているか、選択値を直接変更する方法に関係なく、選択した方法がありますか？

javascriptalpine.js
3
Ryan

x-modelは "変更"イベントを引き起こすことなく値を更新します。

あなたの場合は、「selectを変更するときはいつでもTextAreaの値を''にリセットするときはいつでも）を望みます。

x-initと$watch('select', () => { textarea = '' })を使ってできることができます。ボーナスとしては、x-on:change="textarea = ''"上に<select>は必要ありません。

完全な例は次のとおりです。

<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>
2
Hugo