如何在点击时显示 livewire 组件？答案

【问题标题】：How to show a livewire component on click?如何在点击时显示 livewire 组件？
【发布时间】：2022-08-04 22:50:22
【问题描述】：

我有一个 livewire 组件，我想在单击 div 时加载它，并在再次单击时隐藏它。我怎样才能做到这一点？我试过这个solution 但没有结果。这是我要点击的地方。

<div wire:click=\"$set(\'show\', true)\" id=\"collapseOne\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"headingOne\">
      <div class=\"panel-body\">                        
          <p>
            Unasigned tickets.
          </p>
      
          {{-- Table --}}
          <livewire:show-gestiones :gestiones=\"$gestiones\" :cortes=\"$cortes\" :estado=5 :show=\"$show\"/>
      </div>
</div>

标签： php laravel laravel-livewire

【解决方案1】：

如果您的show-gestiones 组件中不需要任何关于$show 的特定逻辑，如果您只需要从浏览器中隐藏它，您有两个选择 - 使用 Alpine（仅限客户端），或者使用 Livewire 来做（它会先做一个网络请求）。

这是方法一；高山

这里我们使用x-data、x-on:click 和x-show 来切换状态。简单的 JavaScript 处理程序在前端完成所有这些 - 无需向服务器发出请求来执行此操作。这也意味着它将在第一次渲染时创建，并且始终存在。

<div x-data="{ show: false }"
    x-on:click="show = !show"
    id="collapseOne" 
    class="panel-collapse collapse" 
    role="tabpanel"
    aria-labelledby="headingOne"
>
    <div class="panel-body" x-show="show">
        <p>
            Unasigned tickets.
        </p>

        {{-- Table --}}
        
        <livewire:show-gestiones :gestiones="$gestiones" :cortes="$cortes" :estado=5 />
    </div>
</div>

方法 2：Livewire

在这里，我们可以使用 Livewire 中的魔术方法 $toggle 来打开或关闭布尔值。然后，您可以将组件以@if 条件包装到该变量。这也将从 DOM 中完全删除 Livewire 组件中的 HTML，但这也意味着您必须往返于服务器才能执行此操作。这意味着当用户隐藏它时它将被销毁，当它显示时它将被重新创建并重新安装。

<div wire:click="$toggle('show')" 
    id="collapseOne" 
    class="panel-collapse collapse" 
    role="tabpanel"
    aria-labelledby="headingOne"
>
    <div class="panel-body">
        <p>
            Unasigned tickets.
        </p>

        {{-- Table --}}
        @if ($show)
            <livewire:show-gestiones :gestiones="$gestiones" :cortes="$cortes" :estado=5  />
        @endif
    </div>
</div>

【讨论】：