vue.js 未捕获(承诺中)TypeError：无法读取空的属性(读取"指纹")Laravel Livewire

bvhaajcl 于 2023-01-26 发布在 Vue.js

关注(0)|答案(2)|浏览(259)

我用Laravel Livewire制作了一个多文件上传组件，上传完成后，我想显示上传的文件，而不需要重新加载页面，如下所示：

<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">
    @foreach ($files as $file)
        <livewire:file :file="$file"/>
    @endforeach
</div>

一次上传一个或多个文件可以正常工作。但是当循环中已经存在文件时，Livewire会抛出以下错误：Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint').
在做了一些研究后，我得出结论，这是因为Livewire生成的ID与第一个文件相同：

<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">               
    <div wire:id="eCHZ9wxyp7nxOC4o5uCC" class="file file-jpeg file-lg">
        <!-- content of existing file component -->
    </div>
                     
    <div wire:id="eCHZ9wxyp7nxOC4o5uCC" class="file file-jpeg file-lg">
        <!-- content of new file component, should have Unique wire:id -->
    </div>        
</div>

如何解决这个问题？

vue.js

来源：https://stackoverflow.com/questions/70247637/uncaught-in-promise-typeerror-cannot-read-properties-of-null-reading-finger

2条答案

按热度按时间

lyfkaqu11#

该问题首次发生于2020年9月，现已解除（参考：https://github.com/livewire/livewire/issues/1686）。发生错误是因为新文件对现有文件不唯一。Github上提到的解决方案可以工作，但已经过时。
如果您使用的是Laravel 7或更高版本，您可以将:wire:key="$yourUniqueKey"添加到循环内部的livewire组件：

<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">
    @foreach ($files as $file)
        <livewire:file :file="$file" :wire:key="$file->id"/>
    @endforeach
</div>

参考：https://laravel-livewire.com/docs/2.x/nesting-components

赞(0）回复(0）举报 2023-01-26

dldeef672#

我通过在key变量中传递时间来解决这个问题

<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">
    @foreach ($files as $file)
        <livewire:file :file="$file" :wire:key="time().$file->id"/>
    @endforeach
</div>

赞(0）回复(0）举报 2023-01-26

我来回答

vue.js 未捕获(承诺中)TypeError：无法读取空的属性(读取"指纹")Laravel Livewire

2条答案

相关问题

热门标签

最新问答