次の例では、選択要素をクリックして値を変更するときに、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>
_
選択されたイベントを選択する方法は、ボタンでトリガーされているか、選択値を直接変更する方法に関係なく、選択した方法がありますか?
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>