我最初有一个很有说服力的电话 mount()
方法,但当我的属性被重写时,我感觉它实际上并没有被调用一次,所以我将它们移动到了laravel的控制器中。
现在在拉威尔控制器
public function photos() {
$photos = Image::all();
foreach ($photos as $photo) {
$photo->imgLqPath = Storage::disk('s3')->temporaryUrl($photo->path025, now()->addHour());
$photo->imgPath = Storage::disk('s3')->temporaryUrl($photo->path, now()->addHour());
}
return view('cs.photos', [
'photos' => $photos
]);
}
然后将这些照片传递给具有 @livewire('cs.photos', ['photos' => $photos])
现在在组件的视图中,我将它们循环出来,看看它们发生了什么
@foreach ($photos as $ph)
<pre>{{ json_encode($ph->getAttributes(), JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE) }}</pre>
@endforeach
导致
{
"id": 204,
"name": "long_name.png",
"path": "long_path.png",
"description": null,
"path025": "long_path.png",
"user_id": 5,
"coord_id": null,
"gpsx": 12.3,
"gpsy": 45.56,
"imageable_type": "App\\CS",
"imageable_id": 193,
"created_at": "2021-07-24 14:02:30",
"updated_at": "2021-07-24 14:02:30",
"imgLqPath": "https:\/\/path...",
"imgPath": "https:\/\/path..."
}
有了这一点,我很高兴,但是,每当我呼吁通过任何行动 wire:click
(我也试过 .stop
及 .prevent
.
<img
class="card-img-top"
src="{{ $photo->imgLqPath }}"
alt="..."
height="200px"
style="object-fit: contain;"
wire:click="selectPhoto({{ $photo }})"
>
(不管动作是否做某事,问题甚至发生在函数的空白体上)
public function selectPhoto(Image $photo)
{
// $this->photo = $photo;
// $this->emit('photoSelected', 'test');
}
照片属性的“我的循环”更改为
{
"id": 204,
"name": "long_name.png",
"path": "long_path.png",
"description": null,
"path025": "long_path.png",
"user_id": 5,
"coord_id": null,
"gpsx": 12.3,
"gpsy": 45.56,
"imageable_type": "App\\CS",
"imageable_id": 193,
"created_at": "2021-07-24 14:02:30",
"updated_at": "2021-07-24 14:02:30"
}
似乎他们的属性被重置为原来的,但我不知道为什么会发生这种情况。
更新:
在livewire组件控制器中,我添加了:
public function hydratePhotos($value) {
dd($value);
}
它会在没有 path
属性,所以这似乎是问题所在。我还不知道如何解决它,所以如果在我之前没有答案,我会再次更新。
2条答案
按热度按时间piwo6bdm1#
与人们可能“感觉”不同,livewire请求是无状态的——这意味着在请求之间来回发送任何数据——并且在每个请求上从数据库检索一些数据。对于模型和模型集合,在每个请求之间从数据库查询它们-请求中只存储模型类和键。
这意味着,当您的组件在后续请求中重新水化时,您必须重新应用这些自定义属性。如果我们假设您在属性中有一个集合
$photos
在livewire组件上,您可以aij0ehis2#
多亏了qirel'sanswer,我意识到livewire对于500张照片的图库来说不是一个好的解决方案,因为在每个模式的打开或过滤器和排序数据库查询的重组都会被执行。
因此,我决定坚持我的vue版本的上述画廊。
无论如何,某种程度上令人满意的解决方案是创建一组路径
$this->s3Paths = collect();
在里面mount()
方法。然后每次收集
photos
如果已更改,请调用此方法:因为如果我打电话
temporaryUrl()
在里面hydrate
hook,我会给s3打很多不必要的电话,这很昂贵。