Livewire & Select2

如何解决Livewire & Select2

我在我的项目中使用 Livewire 和 Slect2 我也是选择 2 javascript 的代码，但选择 2 值没有传递到数据库这里是我的代码

我的刀片文件

<div class="col-12 col-lg-12 col-sm-12">
    <div wire:ignore>
        <div class="form-group">
            <label for="exampleInputRounded0">Section Name</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
                </div>
                <select class="form-control rounded-0 " wire:model="cr_classes_id" id="cr_classes_id" style="width: 100%;" tabindex="-1" aria-hidden="true">
                    @foreach ($classes as $class)
                    <option value="{{$class->id}}">{{$class->classes_name}}</option>
                    @endforeach
                </select>
            </div>
            @error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>@enderror
        </div>
    </div>
</div>

这是我的 JS

@push('js')
<script type="text/javascript">

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

</script>
@endpush 

控制台错误

Uncaught TypeError: Cannot read property '$wire' of undefined
    at Livewire.value (index.js:31)
    at HTMLSelectElement.<anonymous> (ClassRooms:844)
    at HTMLSelectElement.dispatch (jquery.min.js:2)
    at HTMLSelectElement.v.handle (jquery.min.js:2)
    at Object.trigger (jquery.min.js:2)
    at HTMLSelectElement.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at k.fn.init.trigger (jquery.min.js:2)
    at n.select (select2.min.js:2)

无线：忽略工作查找和数据发送到数据库

解决方法

试试这个

<div class="col-12 col-lg-12 col-sm-12">
        <div wire:ignore.self>
            <div class="form-group">
                <label for="exampleInputRounded0">Section Name</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
                    </div>
                    <select class="form-control rounded-0 " wire:change="$emit('classChanged',$event.target.value)" style="width: 100%;" tabindex="-1" aria-hidden="true">
                        @foreach ($classes as $class)
                        <option value="{{$class->id}}" {{ $cr_classes_id ? 'selected' : ''}} >{{$class->classes_name}}</option>
                        @endforeach
                    </select>
                </div>
                @error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>

在组件中

public $cr_classes_id = '';
public $listeners = [
   'classChanged'
];
......
public function classChanged($value)
{
    $this->cr_classes_id = $value;
}

,

尝试在您的刀片文件中添加 ":key="cr_classes_id_key"

<div class="col-12 col-lg-12 col-sm-12">
<div wire:ignore :key="cr_classes_id_key">
    <div class="form-group">
        <label for="exampleInputRounded0">Section Name</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
            </div>
            <select class="form-control rounded-0 " wire:model="cr_classes_id" id="cr_classes_id" style="width: 100%;" tabindex="-1" aria-hidden="true">
                @foreach ($classes as $class)
                <option value="{{$class->id}}">{{$class->classes_name}}</option>
                @endforeach
            </select>
        </div>
        @error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>@enderror
    </div>
</div>