当数据动态变化时，如何有效地在表中的laravel-livewire中使用foreach？

Question

当我将foreach刀片指令与Livewire以及在html表中呈现的动态变化的数据相结合时，我一直在苦苦挣扎。

具体情况：

表的每一行都包含一个可点击的图标，该图标可以切换与该行相关的变量

听起来很简单，但我不能让它正常工作。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class UnreconciledServices extends Component
{

    public $services;
    


    public function render()
    {
        return view('livewire.unreconciled-services');
    }


    //
    // receives an invoice number and changes the "reconciled" value for the $aaaServices record to true
    //
   

    public function test($a)
    {
    }
}

这很简单--有一个名为"test“的函数接受一个变量(函数什么都不做)，还有一个名为$services的记录集合，它已经从父函数传入。

刀片文件如下：

<div>
        <table style="width:100%">
            <thead>
                <tr>
                    <th width="5%">

                    </th>
                    <th>
                        Service Date
                    </th>
                    <th>
                        Call #
                    </th>
                    <th>
                        Payment
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach ($services as $service)
                    {{-- <span wire:key="{{$service->invoice_number}}"> --}}

                        {{-- @if ($service->reconciled == false) --}}
                            <tr  id="{{$service->invoice_number}}" class="text-center" style="{{ $service->reconciled == 1 ? 'display:none' : 'show'}}">
                                <td>
                                    {{-- <input class="m-2" type="checkbox"> --}}
                                    {{-- <span class="m-2"><i class="far fa-trash-alt text-red-500"></i></span> --}}

                                    <span wire:key="{{$service->invoice_number}}" wire:click="test('{{$service->invoice_number}}')" class="m-2 cursor-pointer"><i class="lm-2 rm-2 fas fa-plus text-green-500"></i></span>
                                </td>
                                <td>
                                    {{$service->invoice_date}}
                                </td>
                                <td>
                                    {{$service->call_number}}
                                </td>
                                <td>
                                    {{$service->service_price}}
                                </td>
                            </tr>
                        {{-- @endif --}}
                    {{-- </span> --}}
                @endforeach
            </tbody>
        </table>
    </div>

这是一个4列的简单表。第一个是可点击的图标，另外3个是数据。只有当“协调的”布尔值为0时，行才会可见。

在最初呈现时，将显示适当的记录(有2条符合条件，177条没有)。然而，一旦我点击图标--即使它链接到的函数没有实际内容--所有记录都会突然可见，除了我刚才隐藏的记录。

当我单击图标时，查看html更改，标记将从

<tr id="21031251674" class="text-center" style="display:none">

至

<tr id="21031253205" class="text-center" style="show">。

我尝试过使用livewire键，但我不确定这将如何影响功能，因为我不是呈现组件，而是数据驱动的html。

当然，还有其他人遇到并克服了这一问题。请给我指出正确的方向。

Answer 1

很抱歉让您久等了。这整条线应该被删除，就像骨头一样。但它是认真写的..。

当一切都说了又做了，我不清楚b/w是一种基于html / ajax的方法，比如livewire和一些更基于javascript的方法，比如Vue。当我尝试使用它时，我期待框架中不存在的功能。

为了解决这个问题，我使用emit在组件之间进行通信并调整后端数据源，转而将单个行项作为组件本身。

一旦我接受了html / ajax方法，停止了强制/ expect javascript功能& dom操作，那么一切都很好。只是心态和我所熟悉的不一样，我花了一些时间才走出困境。