laravel Livewire Uncaught(in promise)TypeError:无法读取null的属性“split”

cnjp1d6j  于 2023-04-22  发布在  其他
关注(0)|答案(2)|浏览(126)

我使用Livewire,和select2过滤列表中的记录在一些表.这是多标准搜索.选择下拉设置为“多”选项.当我通过选择第一个项目过滤,列表被更新.当我选择另一个项目,列表被更新,但我得到这个:

LoadingStates.js:192 Uncaught (in promise) TypeError: Cannot read property 'split' of null
at LoadingStates.js:192
at Array.forEach (<anonymous>)
at startLoading (LoadingStates.js:190)
at setLoading (LoadingStates.js:161)
at LoadingStates.js:50
at MessageBus.js:17
at Array.forEach (<anonymous>)
at MessageBus.value (MessageBus.js:16)
at Object.call (HookManager.js:38)
at Object.callHook (Store.js:120)

我不能选择另一个项目,似乎这创造了无限循环,因为我得到它越来越多,我不能再做任何事情。
select是blade组件。下面是它的html:

<div>
@props(['datas', 'label'])
<div wire:ignore>
    <select class="form-control select2" {{ $attributes }}>
        @foreach($datas as $key => $item)
            <option value="{{ $item->id }}">{{ $item->$label }}</option>
        @endforeach
    </select>
</div>

在我的livewire组件中,我像这样使用它:

<div>
     <div class="form-group">
       <label for="myField1" class="font-weight-bold">Field 1 list</label>
       <x-utils.select2 class="form-control multiselect" name="myField1" multiple
                            wire:model="myField1" :datas="$field1datas" label="name"/>
     </div>
</div>
...

<table class="table">
    <tbody>
                        @if ($queryResults->count() > 0)
                        @foreach($queryResults as $key => $a)
                            <tr wire:key="{{ $loop->index }}">
                                <td>$a->content</td>
                            </tr>
                        @endforeach
                        @endif
    </tbody>
 </table>

我的livewire组件脚本是:

function initSelect2() {
    $('.select2').select2({
        allowClear: true,
        placeholder: 'Veuillez faire un choix',
        language: "fr",
        width: "100%",
    }).on('change', function(e){
        console.log($(this).select2("val"));
        @this.set($( this).attr('name'), ( $(this).select2("val") ? $(this).select2("val") : $(this).val() ) );
    });
 }
 initSelect2();
 document.addEventListener("livewire:load", () => {
    Livewire.hook('message.processed', () => {
        initSelect2();
    });
});

似乎错误
TypeError:无法读取null的属性“split”
是关于返回的查询数据作为过滤结果,但我不知道为什么。我在这里检查:https://github.com/livewire/livewire/issues/2537但这对我没有帮助。如何解决这个问题?谢谢

zengzsys

zengzsys1#

你忘了关闭div标签。

<div>
    @props(['datas', 'label'])
    <div wire:ignore>
        <select class="form-control select2" {{ $attributes }}>
            @foreach($datas as $key => $item)
                <option value="{{ $item->id }}">{{ $item->$label }}</option>
            @endforeach
        </select>
    </div>
</div>
sdnqo3pr

sdnqo3pr2#

在你的livewire组件中,你犯了一个错误。
来自文件:https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-cures
解决方案是确保您只有一个根HTML元素,例如a。如果您有多个元素,则将所有内容 Package 在适合您布局的一个或另一个元素中。

<div>
  <div>
     <div class="form-group">
       <label for="myField1" class="font-weight-bold">Field 1 list</label>
       <x-utils.select2 class="form-control multiselect" name="myField1" multiple
                            wire:model="myField1" :datas="$field1datas" label="name"/>
     </div>
</div>
...

<table class="table">
    <tbody>
                        @if ($queryResults->count() > 0)
                        @foreach($queryResults as $key => $a)
                            <tr wire:key="{{ $loop->index }}">
                                <td>$a->content</td>
                            </tr>
                        @endforeach
                        @endif
    </tbody>
 </table>
</div>

相关问题