通过 Laravel 和 livewire 更新循环记录

Question

您好，我需要一些帮助。

这个循环来自我的产品表，我使用纯 laravel 将每个产品加载到输入中，因此如果我进行任何更改并单击更新按钮，它将被重定向到更新更改产品的路线。

我如何使用 livewire 实现同样的想法？

如何在此循环中显示更新的数据，而无需转到另一条路线。

我的刀片：

@forelse($categoryProduct->products as $key => $product)
<li>
    <div class="mt-3 card">
        <div class="card-body">
            <div class="row">
                <div class="col-1">
                    <x-inputs.group class="">
                        <div
                            x-data="imageViewer('{{ $product->img ? \Storage::url($product->img) : '' }}')">
                            <x-inputs.partials.label name="img" label="Foto">
                            </x-inputs.partials.label><br />

                            <!-- Show the image -->
                            <template x-if="imageUrl">
                                <img :src="imageUrl"
                                    class="object-cover border border-gray-200 rounded"
                                    style="width: 100px; height: 100px;" />
                            </template>

                            <!-- Show the gray box when image is not available -->
                            <template x-if="!imageUrl">
                                <div class="bg-gray-100 border border-gray-200 rounded"
                                    style="width: 140px; height: 140px;"></div>
                            </template>

                            <div class="mt-2">
                                <input wire:model="img" type="file" name="img" id="img"
                                    @change="fileChosen" />
                            </div>

                            @error('img')
                                @include('components.inputs.partials.error')
                            @enderror
                        </div>
                    </x-inputs.group>
                </div>
                <div class="col-11">
                    <div class="row">
                        <div class="col-10">
                            <input type="text" class="form-control" placeholder="Name"
                                value="{{ $product->name }}">
                        </div>
                        <div class="col-2">
                            <button
                                onclick="confirm('Tem certeza que deseja deletar esse produto?') || event.stopImmediatePropagation()"
                                wire:click.prevent="deleteProduct({{ $product->id }})"
                                class="btn btn-user btn-danger">
                                &times;
                            </button>
                        </div>
                        <div class="mt-3 col-10">
                            <textarea class="form-control"
                                placeholder="Description">{{ $product->description }}</textarea>
                        </div>
                        <div class="mt-3 col-2">
                            <input type="number" class="form-control"
                                placeholder="Price" value="{{ $product->price }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
</li>
@empty

Th是我提供循环的方式：

public function render()
    {
        $this->shop = Shop::with([
            'categoryProducts',
            'categoryProducts.products',
            'districts'
        ])->where('user_id', Auth::user()->id)->first();

        return view('app.menu-controller')
            ->extends('layouts.app')
            ->section('content');
    }

Answer 1

您可以创建一个 Livewire ProductComponent 并在刀片中拥有 div 卡，一旦此循环相同的元素 https://www.laravel-livewire.com/docs/2.x/making-components https://www.laravel-livewire.com/docs/2.x/rendering-components

<div>
  <div class="mt-3 card">
        <div class="card-body">
            <div class="row">
                <div class="col-1">
                    <x-inputs.group class="">
                        <div
                            x-data="imageViewer('{{ $product->img ? \Storage::url($product->img) : '' }}')">
                            <x-inputs.partials.label name="img" label="Foto">
                            </x-inputs.partials.label><br />

             //......................               
  </div>
</div>

在循环的嵌套组件中使用模型绑定 https://www.laravel-livewire.com/docs/2.x/nesting-components

@forelse($categoryProduct->products as $key => $product)
<li>
   @livewire('product-component',['product' => $product], key($user->id))
</li>

在组件中

public Product $product;

public function render()
{
    return view('livewire.product-component')
            ->extends('layouts.app')
            ->section('content');
}

Livewire 文档中的其余部分，当您进入那里时，可能会遇到问题或疑问。问候