Question

我最初在 livewire 组件的 const result = await contractInstance.yourFunction(param); const {0: variable_1, 1: variable_2} = result; 方法中进行了 ma DB eloquent 调用，但后来我觉得它实际上并不是只调用一次，因为我的属性被重写，所以我将它们移到 Laravel 的控制器中。< /p>

现在在 Laravel 控制器中

mount()

然后将这些照片传递给组件 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');
}

似乎他们的属性被重置为原始属性，但我不知道为什么会发生这种情况。

更新：

对 livewire 组件控制器，我添加了：

{
    "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"
}

它转储了没有 public function hydratePhotos($value) { dd($value); } 属性的照片集合，所以这似乎是问题所在。我还不确定如何解决它，所以如果在我做之前没有答案，我会再次更新。

Answer 1

与人们可能“感觉”不同，Livewire 请求是状态较少 - 意味着任何数据在请求之间来回发送 - 并且一些数据是从每个请求的数据库。对于模型和模型集合，在每次请求之间从数据库中查询它们 - 只有模型类和键存储在请求中。

这意味着当您的组件因后续请求而重新水合时，您必须重新应用这些自定义属性。如果我们假设您在 Livewire 组件的 $photos 属性中有一个集合，您可以执行

public function hydrate()
{
    foreach ($this->photos as $photo) {
        $photo->imgLqPath = Storage::disk('s3')->temporaryUrl($photo->path025, now()->addHour());
        $photo->imgPath = Storage::disk('s3')->temporaryUrl($photo->path, now()->addHour());
    }
}

Answer 2

感谢 Qirel's answer 我意识到 livewire 对于 500 张照片的画廊不是一个好的解决方案，因为在每个模式的打开或过滤器和排序的重组时，都会执行数据库查询。

因此我决定坚持我的上述画廊的 vue 版本。

无论如何，有点令人满意的解决方案是在 $this->s3Paths = collect(); 方法中创建路径 mount() 的集合。

然后每次更改 photos 的集合时，调用此方法：

public function getS3Paths()
{
    foreach ($this->photos->whereNotIn('id', $this->s3Paths->keys()) as $photo) {
        $this->s3Paths->put($photo->id, Storage::disk('s3')->temporaryUrl($photo->path, now()->addHour()));
    }
}

因为如果我在 temporaryUrl() 钩子中调用 hydrate，我会对 s3 进行很多不必要的调用，这很昂贵。

模型的属性如何在 Livewire Laravel 中默认为原始属性

更新：

2 个答案: