0

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

トグル.ブレード.php

@props([
    'id' => 1
])

<div class="flex justify-center items-center">
    <div {{ $attributes->whereStartsWith('class')->merge(['class' => 'relative rounded-full transition duration-200 ease-linear' ]) }}
        :class="[ $refs.toggle{{ $id }}.checked ? 'bg-green-400' : 'bg-gray-400' ]">
        <label for="toggle{{ $id }}"
            class="absolute left-0 bg-white border-2 mb-2 w-1/2 h-full rounded-full transition transform duration-100 ease-linear cursor-pointer"
            :class="[ $refs.toggle{{ $id }}.checked ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400' ]"></label>
        <input x-ref="toggle{{ $id }}" type="checkbox" id="toggle{{ $id }}" class="appearance-none w-full h-full active:outline-none focus:outline-none"
            {{ $attributes }} x-init="console.log('test')" />
    </div>
</div>

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

<div>
  <x-inputs.toggle class="w-8 h-4" value="{{ $permission['id'] }}" 
    id="{{ $permission['id'] }}" x-model="permissions" /> <-- this one
  <input class="form-checkbox" value="{{ $permission['id'] }}" type="checkbox" x-model="permissions">
</div>

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

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

アップロード許可のチェックボックス/トグル

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

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

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

前もって感謝します。

4

1 に答える 1