問題タブ [alpine.js]

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

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

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

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

独自のトグル コンポーネントを作成しようとしています。このコンポーネントは、通常のように動作する必要があります<input type="checkbox" >。これまでのところ、次のものを作成しました。

トグル.ブレード.php

私はそれをどのように呼びますか：

コンポーネントに x-model を配置できるようにしたいと考えています。チェックボックス入力から通常の双方向バインディングを使用できるようにします。

上記のコードは機能しますが、ref (入力) は$refs呼び出しよりも後で初期化されるためです。チェックボックス/トグルの1つが押されるまで（参照が更新されるまで）、トグルで間違ったクラスを引き起こします。画像を参照してください：

通常、コンポーネントに x-data を与えて、トグルされているかどうかなどを確認します。ただし、コンポーネントの x-data プロパティにモデルが存在しないため、x-model を使用できません。

私も試したのは、のx-modelようなクラス プロパティの値を渡すことです: :class="[ {{ $attirubtes->whereStartsWith('x-model')->first() ? ... : ... ]"。しかし、これも機能しません。配列を x-model チェックボックスに渡しているためです。alpine.js はいくつかの凝った処理を行い、それを正しく処理します。

この問題を解決する方法はありますか?

前もって感謝します。