Livewire 不发送 select2 变量

Question

我创建了一个 livewire 组件，我在其中创建了一个带有普通输入的表单和多个 select 和 select2。我填写了字段并 select 在 select 中编辑了必要的选项，所有变量（来自默认输入和默认 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');
    }
}

Answer 1

基本上，您需要告诉 Livewire 忽略您原来的 select 项，然后使用 javascript 挂接到 select 选择器上的已更改事件。您可以看到 blade 指令 @this.set('foo', e.target.value);，它告诉您的 Livewire Class 将 public 属性的值设置为在 select 选择器中选择的值.

我对日期时间选择器使用了相同的方法，效果也一样。这是一个代码示例

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

Livewire 不发送 select2 变量

Livewire doesn't sent select2 variable

laravel

jquery-select2

laravel-livewire