Livewire 未捕获(承诺中)TypeError:无法读取 null 的属性“split”
2021-05-07
2877
我正在使用 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)
我无法选择另一个项目,这似乎造成了无限循环,因为我得到的越来越多,我再也无法做任何事情了。
选择是 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: Cannot read property 'split' of null
是关于查询数据作为过滤结果返回,但我不知道为什么。 我在这里检查了这个: https://github.com/livewire/livewire/issues/2537 但这对我没有帮助。 如何解决这个问题? 谢谢
2个回答
您忘记关闭 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>
Azahar Alam
2022-02-16
在您的 livewire 组件中,您犯了一个错误。
来自文档: https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-cures
解决方案是确保您只有一个根 HTML 元素,例如 。如果您有多个元素,则将所有内容包装在 或另一个适合您布局的元素中。
<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>
Kingsley Uchenna
2023-04-20