如何“销毁”并重新渲染laravel livewire中具有foreach数据的div？

Question

所以，我有一个 livewire，其数据来自 json.gz。所以它不是来自模型 laravel。在这个livewire中，我需要制作自定义分页、自定义数据表单等。

所以，我有这个选择选项“thing”，可以显示1-10或1-50的数据（我不知道这叫什么）。标记是这样的：

<div>
    <select wire:change="changeCountRows($event.target.value)" class="form-select form-select-sm form-select-solid w-100px">
        <option value="10">10</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>
</div>

默认值为10。因此数据将显示10/页。

现在的问题是，当我尝试从 10 个/页更改为 50 个/页时，效果很好。 但是，当尝试“减少”它时，例如从 50 变为 10/页，div“数据视图”仍然显示 50。但是，从 1-10 的数据/行发生了更改（因此当我更改选择选项10）。

所以我的问题是，如何删除这11-50行（剩余数据）？

我已经尝试并遵循这些文章：

• 第1条
• 第1条
• 还有一些 YouTube 视频
• 这基本上向我展示了使用 $refresh“刷新”组件视图。但还是没有运气

这是我的情侣功能

• 渲染（）：

public function render()
{
    if($this->items_json == null || $this->prev_search !== $this->search) {
        $this->getDatasJson();
        $this->prev_search = $this->search;
    }
    $this->arrayChunkJson($this->items_json, $this->filterEntries);

    if($this->page_custom >= $this->end_page){
        $this->end_page = $this->page_custom+1;
        $this->start_page = $this->page_custom - 4;
    }elseif ($this->page_custom < $this->start_page) {
        $this->start_page = $this->page_custom;
        $this->end_page = $this->page_custom + 5;
    }
    $datas = $this->single_cat[$this->page_custom];
    $this->last_total_cat = array_keys($datas)[0] + 1;
    $this->total_cat_show = $this->last_total_cat + ($this->filterEntries - 1);

    // dd($this->single_cat);
    return view('livewire.kategori.single-kategori-mobile', [
        'single_cats' => $this->single_cat[$this->page_custom],
        'page' => $this->page_custom,
        'total_page' => $this->total_page,
        'start_page' => $this->start_page,
        'end_page' => $this->end_page,
        'total_cat' => $this->total_cat,
        'last_total_cat' => $this->last_total_cat,
        'total_cat_show' => $this->total_cat_show
    ]);
}

• 更改计数行（）：

public function changeCountRows($filterEntries){
    $this->filterEntries = $filterEntries;
    $this->emit('refresh_me');
}

• 文件顶部的监听器：

protected $listeners = ['refresh_me' => '$refresh'];

• 这就是我在视图中获取它的方式：

<div class="flex flex-col" wire:loading.class="loading">
    {{-- @dd(count($single_cats)); --}}
    @foreach($single_cats as $val)
        my data
    @endforeach
</div>

再次，我唯一的问题是，如何从视图中“删除”剩余数据。就像视图仍然“读取”“数据块”一样。甚至很难，在渲染函数中，我用

arrayChunkJson()

函数“重新分块”它。

提前谢谢您！

Answer 1

您可以考虑阅读本文 Dom Diffing 问题

例如。

@foreach($single_cats as $val)
    <p wire:key={{ $loop->index }}>my data</p>
@endforeach