laravel-livewire - Livewire - 同じ HTML フィールドの x-model と wire:model

Question

選択フォーム フィールドがある Livewire コンポーネントがあります。

フィールドを a) モデルにバインドし、b) 値が変更されたときに別の HTML フィールドを表示するようにします。

モデル バインディング用の Livewire と Alpine.js を組み合わせて使用​​し、フィールドの変更に対応したいと考えています。

<div
    x-data="{ isExtraData : false, display_type : '' }"
    x-init="$watch('display_type', () => { isExtraData = display_type != 'text_field' })"
>

HTML 要素に適切な値を設定するか、ドロップダウンで値を変更するときに対話性を持たせることができますが、(以下のように) 両方を持っている場合、値は選択フィールドにバインドされません。

<select id="display_type" class="form-control mr-2" style="width:auto" wire:model="display_type" x-model="display_type" required>