Блог

Я создал компонент livewire, в нем я создал форму с обычным вводом и множественным выбором с помощью select2. Я заполнил поля и выбрал необходимые параметры в select, все переменные (от ввода по умолчанию и выбора по умолчанию) отправляются, кроме select2.

Через ddd(); это показывает, что они являются []. Через консоль я вижу, что все переменные, кроме select с помощью select2, отправляются.

В чем может быть проблема?

 <div>
    <form wire:submit.prevent="createPerson" method="POST">
        @csrf
        <div>
            {{--WORKS--}}
            <x-jet-label for="name" value="{{ __('Name') }}"></x-jet-label>
            <x-jet-input wire:model.defer="name"
                         id="name"
                         name="name"
                         type="text"
                         autocomplete="off"
                         required>
            </x-jet-input>
            @error('name') <span>{{$message}}</span> @enderror
        </div>
        <div>
            {{--WORKS---}}
            <label for="agree">{{ __('Agree?') }}</label>
            <select wire:model.defer="agree"
                    id="agree"
                    name="agree"
                    required>
                <option value="1">
                    {{ __('Yes') }}
                </option>
                <option value="0">
                    {{ __('No') }}
                </option>
            </select>
            @error('agree') <span>{{$message}}</span> @enderror
        </div>
        <div>
            {{--DOES NOT WORK--}}
            <x-jet-label for="town" value="{{ __('Town') }}"></x-jet-label>
            <select wire:model.defer="town"
                    name="town[]"
                    id="town"
                    class="select2-multiple-town"
                    style="width: 100%"
                    autocomplete="off"
                    multiple
                    required>
                @isset($items)
                    @foreach($items as $item)
                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                    @endforeach
                @endisset
            </select>
            @error('town') <span class="text-sm text-red-600">{{$message}}</span> @enderror
        </div>
        <div>
            <button type="submit">{{ __('Create') }}</button>
        </div>
    </form>
</div>
@push('modals')
    <script type="text/javascript">
        function select2Init() {
            $('.select2-multiple-town').select2({
                minimumInputLength: 2
            });
        }
        document.addEventListener("DOMContentLoaded", () => {
            Livewire.hook('component.initialized', (component) => {
                select2Init();
            });
            Livewire.hook('message.processed', (message, component) => {
                select2Init();
            })
        })
    </script>
@endpush
 

 class AddPerson extends Component
{
    #VARIABLES FROM CONTROLER
    public $items = [];

    @VARIABLES FROM COMPONENT
    public $name;
    public $agree;
    public $town = [];
   
    protected $rules = [
        'name'              => 'required',
        'agree'             => 'required',
        'town'              => 'required',
    ];

    public function createPerson()
    {
        $this->validate();
    
        Person::create([
            'name'           => $this->name,
            'agree'          => $this->agree,
            'town'           => $this->town,
        ]);

        $this->reset();

        $this->redirect(route('moderator.main'));
    }

    public function render()
    {
        return view('livewire.mod.add-person');
    }
}
 

В принципе, вам нужно сказать Livewire, чтобы он проигнорировал ваш исходный элемент выбора, а затем использовал javascript для подключения к измененному событию в вашем средстве выбора. Вы можете увидеть директиву blade @this.set('foo', e.target.value); , которая указывает вашему классу Livewire установить значение вашей общедоступной собственности в соответствии с тем, что было выбрано в окне выбора.

Я использовал тот же подход для datetimepickers, и он работает так же хорошо. Вот пример кода

 <script>
    $(document).ready(function() {
        $('#select2').select2();
        $('#select2').on('change', function (e) {
            var data = $('#select2').select2("val");
            @this.set('foo', data);
        });
    });
</script>