如何正确嵌套模态组件？

Question

我有一个问题。我正在尝试创建一个用于报告的模式窗口，该窗口动态地提供报告评论和帖子，因此无需创建多个模式窗口。我已经为报告创建了一个组件，可以为两种类型的报告提供服务，但我正在努力确保只为给定类型打开一个模式窗口，无论是针对帖子还是针对评论。目前，两个模式窗口同时打开——当我提交一个时，另一个也会打开。我可以在同一视图中报告帖子和评论。但是，我希望仅针对特定类型打开模式窗口。我什至尝试创建两个具有不同操作的模式窗口，但这也没有帮助。关于将数据保存到数据库，效果很好。这个问题与此无关。我更关心如何根据用户单击的内容分别为每个组件打开模式窗口的前端过程，而不是同时打开两个窗口。谢谢您的协助。

这是我的 reports.blade.php 组件，其中具有功能模式。

<?php

use Livewire\Volt\Component;
use App\Models\Post;
use App\Models\Report;
use Mary\Traits\Toast;
use Illuminate\Database\Eloquent\Model;

new class extends Component {
    use Toast;
    protected $listeners = ['openReportModal'];

    public Model $model;
    public $reportableType;
    public $reportableId;

    public bool $report_modal = false;
    public array $selectedReports = [];

    public function mount(Model $model): void
    {
        $this->model = $model;
        $this->reportable_type = $model->reportable_type;
        $this->reportable_id = $model->reportable_id;
    }

    public function openReportModal($params)
    {
        $this->reportable_id = $params['id'];
        $this->reportable_type = $params['type'];
        $this->report_modal = true;
    }

    public function reportTypes()
    {
        $reportTypes = [
            'Spam' => 'Spam',
            'Nepřístojný' => 'Nepřístojný obsah',
            'Urážlivý' => 'Urážlivý',
            'Jiné' => 'Jiné',
        ];
        return $reportTypes;
    }
    public function report(): void
    {
        if (auth()->check()) {
            $selectedReports = $this->selectedReports;

            if (empty($selectedReports)) {
                $this->error('Vyberte prosím alespoň jeden typ reportu.');
                return;
            }

            $reportData = [
                'user_id' => auth()->user()->id,
                'reportable_id' => $this->model->id,
                'reportable_type' => class_basename($this->model),
            ];

            foreach ($selectedReports as $reportType) {
                switch ($reportType) {
                    case 'Spam':
                        $reportData['spam'] = true;
                        break;
                    case 'Nepřístojný':
                        $reportData['inappropriate'] = true;
                        break;
                    case 'Urážlivý':
                        $reportData['offensive'] = true;
                        break;
                    case 'Jiné':
                        $reportData['other'] = true;
                        break;
                }
            }

            $report = new Report($reportData);
            $report->save();
            $this->reset(['report_modal', 'selectedReports']);

            $objectType = $this->model instanceof Post ? 'Příspěvek' : 'Komentář';
            $this->success("$objectType byl nahlášen.");
        }
    }
}; ?>

<div>
    <x-modal wire:model="report_modal" title="Nahlášení" subtitle="Pokud je komentář nevhodný, můžete ho zde nahlásit"
        separator>
        <form wire:submit.prevent="report">
            @foreach ($this->reportTypes() as $key => $reportType)
                <div class="flex items-center justify-left mb-2">
                    <input type="checkbox" id="{{ $key }}" wire:model="selectedReports" value="{{ $key }}"
                        class="mr-2">
                    <label for="{{ $key }}">{{ $reportType }}</label>
                </div>
            @endforeach
            <x-slot name="actions">
                <x-button label="Cancel" @click="$wire.report_modal = false" />
                <x-button label="Confirm" @click="$wire.report" class="btn-primary" type="submit" />
            </x-slot>
        </form>
    </x-modal>


</div>

这是我称之为模态的评论卡

public function openReportModal(){
        $this->dispatch('openReportModal', ['id' => $this->comment->id, 'type' => get_class($this->comment)]);

    }

<x-slot:menu>
            <x-dropdown right>
                <x-slot name="trigger">
                    <x-button icon="o-ellipsis-vertical" class="btn-sm btn-ghost btn-circle" />
                </x-slot>
                @if (auth()->check())
                    <x-menu-item title="Nahlásit" icon="m-shield-exclamation" @click="$wire.openReportModal"
                        class="text-error" />
                @endif
                @if ($comment->author->isMyself())
                    <x-menu-item title="Editace" icon="o-pencil" @click="$wire.editing = true" />
                    <x-menu-item title="Smazat" icon="o-trash" wire:click="delete({{ $comment->id }})"
                        class="text-error" />
                @endif
            </x-dropdown>

        </x-slot:menu>

        <livewire:reports.reports :model="$comment" :reportable_type="$comment->reportable_type" :reportable_id="$comment->reportable_id"/>

这是展示后组件，我也将其称为报告。

 public function openReportModal(){
        $this->dispatch('openReportModal', ['id' => $this->post->id, 'type' => 'Post']);
    }

@if($post->author->isMyself())
            <div>
                @if(! $post->archived_at)
                    <x-button label="Archivovat" wire:click="archive" icon="o-archive-box" class="btn-sm btn-ghost" />
                    <x-button label="Editace" link="/posts/{{ $post->id }}/edit" icon="o-pencil" class="btn-sm btn-ghost" />
                    <x-button label="Nahlásit" icon="m-shield-exclamation" @click="$wire.openReportModal" class="btn-sm btn-error" />

                    <x-button label="Smazat" wire:click="delete({{ $post->id }})" icon="o-trash" class="btn-sm btn-error " />
                    @else
                    <x-button label="Unarchive" wire:click="unarchive" icon="o-archive-box" class="btn-sm btn-ghost" />
                @endif
            </div>
        @endif

    <livewire:reports.reports :model="$post" :reportable_type="$post->reportable_type" :reportable_id="$post->reportable_id"/>

我什至不记得我尝试过的所有内容，但我想要的是为多个模型提供一个动态模态窗口。然而，当我在网页上并且有一篇文章和两条评论时，模式窗口会打开三次......似乎每个对象。

Answer 1

解决方案：看起来模态组件的可见性是由第 34 行的 x-data="{open: @entangle($attributes->wire('model')).live }" 处理的。在您的实现中， $report_modal 是用于 $attributes->wire('model') 的值 (wire:model="report_modal")。 $report_modal 在所有模态上都设置为 true，因为它们都在侦听相同的浏览器事件 (openReportModal)。您可以向 openReportModal() 侦听器函数添加检查，以确保事件中传递的类型与该组件实例的类型匹配（而不是通用的 $this->report_modal = true）