如何在Laravel/Livewire动态问卷中实现结果展示功能

方案一：组件内属性驱动的条件弹窗（结合Alpine.js） #

直接在当前问卷组件中跟踪第7题的回答状态，用Alpine.js实现弹窗的显示/隐藏，根据回答内容切换结果文本。

1. 组件类中添加属性：

class Questionnaire extends Component
{
    public $answer7 = null;
    public $showResultModal = false;

    // 其他已有逻辑...

    public function setAnswer7($value)
    {
        $this->answer7 = $value;
        $this->showResultModal = true;
    }
}

2. 视图中渲染弹窗：

<!-- 第7题选项 -->
<div>
    <button wire:click="setAnswer7('yes')">Yes</button>
    <button wire:click="setAnswer7('no')">No</button>
</div>

<!-- 结果弹窗 -->
<div x-data="{ open: @entangle('showResultModal') }" x-show="open" class="fixed inset-0 bg-black/50 flex items-center justify-center">
    <div class="bg-white p-6 rounded-lg">
        @if($answer7 === 'yes')
            <p>7th question yes result</p>
        @elseif($answer7 === 'no')
            <p>7th question No result</p>
        @endif
        <button x-on:click="open = false" class="mt-4 px-4 py-2 bg-gray-200 rounded">关闭</button>
    </div>
</div>

这种方案利用Livewire的属性纠缠（@entangle）同步组件和前端状态，无需额外请求，体验流畅。

方案二：Livewire事件触发结果展示 #

通过自定义事件触发结果弹窗，适合问卷结构复杂、需要解耦逻辑的场景。

1. 组件类中定义事件监听和处理逻辑：

class Questionnaire extends Component
{
    public $showResult = false;
    public $resultContent = '';

    protected $listeners = ['showQuestion7Result' => 'displayResult'];

    public function displayResult($answer)
    {
        $this->resultContent = $answer === 'yes' ? '7th question yes result' : '7th question No result';
        $this->showResult = true;
    }

    // 其他已有逻辑...
}

2. 视图中触发事件并渲染弹窗：

<!-- 第7题选项 -->
<div>
    <button wire:click="$emit('showQuestion7Result', 'yes')">Yes</button>
    <button wire:click="$emit('showQuestion7Result', 'no')">No</button>
</div>

<!-- 结果弹窗 -->
@if($showResult)
    <div class="fixed inset-0 bg-black/50 flex items-center justify-center">
        <div class="bg-white p-6 rounded-lg">
            <p>{{ $resultContent }}</p>
            <button wire:click="$set('showResult', false)" class="mt-4 px-4 py-2 bg-gray-200 rounded">关闭</button>
        </div>
    </div>
@endif

事件机制可以让你在其他组件或逻辑中也能触发结果展示，灵活性更高。

方案三：独立结果组件嵌入弹窗 #

将结果展示封装为独立的Livewire组件，通过动态挂载实现弹窗，适合结果内容复杂、需要复用的场景。

1. 创建独立的结果组件：

// app/Http/Livewire/Question7Result.php
class Question7Result extends Component
{
    public $answer;

    public function mount($answer)
    {
        $this->answer = $answer;
    }

    public function render()
    {
        return view('livewire.question7-result');
    }
}

2. 结果组件视图：

<!-- resources/views/livewire/question7-result.blade.php -->
<div class="bg-white p-6 rounded-lg">
    @if($answer === 'yes')
        <p>7th question yes result</p>
    @else
        <p>7th question No result</p>
    @endif
    <button wire:click="$emit('closeResultModal')" class="mt-4 px-4 py-2 bg-gray-200 rounded">关闭</button>
</div>

3. 主问卷组件中挂载并显示：

class Questionnaire extends Component
{
    public $showResultModal = false;
    public $selectedAnswer = null;

    protected $listeners = ['closeResultModal' => 'hideModal'];

    public function showResult($answer)
    {
        $this->selectedAnswer = $answer;
        $this->showResultModal = true;
    }

    public function hideModal()
    {
        $this->showResultModal = false;
    }

    // 其他已有逻辑...
}

4. 主视图中渲染：

<!-- 第7题选项 -->
<div>
    <button wire:click="showResult('yes')">Yes</button>
    <button wire:click="showResult('no')">No</button>
</div>

<!-- 弹窗容器 -->
@if($showResultModal)
    <div class="fixed inset-0 bg-black/50 flex items-center justify-center">
        @livewire('question7-result', ['answer' => $selectedAnswer], key('question7-result'))
    </div>
@endif

这种方式将结果逻辑独立出来，便于维护和复用，适合后续扩展复杂结果内容。

方案四：基于Livewire模态框的原生实现 #

利用Livewire的wire:model和条件渲染实现原生模态框，无需依赖Alpine.js，适合纯Livewire栈的项目。

1. 组件类：

class Questionnaire extends Component
{
    public $answer7 = null;
    public $isModalOpen = false;

    public function submitAnswer7($value)
    {
        $this->answer7 = $value;
        $this->isModalOpen = true;
    }

    public function closeModal()
    {
        $this->isModalOpen = false;
    }

    // 其他已有逻辑...
}

2. 视图：

<!-- 第7题选项 -->
<div>
    <button wire:click="submitAnswer7('yes')" class="px-4 py-2 bg-blue-500 text-white rounded">Yes</button>
    <button wire:click="submitAnswer7('no')" class="px-4 py-2 bg-red-500 text-white rounded">No</button>
</div>

<!-- Livewire原生模态框 -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center" @if(!$isModalOpen) style="display: none;" @endif>
    <div class="bg-white p-6 rounded-lg">
        <h3 class="text-lg font-bold mb-2">结果</h3>
        <p>{{ $answer7 === 'yes' ? '7th question yes result' : '7th question No result' }}</p>
        <button wire:click="closeModal" class="mt-4 px-4 py-2 bg-gray-200 rounded">关闭</button>
    </div>
</div>

这种方案完全基于Livewire的状态管理，适合不想引入额外前端库的场景，逻辑简洁直接。

内容的提问来源于stack exchange，提问作者Raxmatullo Erkinov