使用 Alpine JS 显示和隐藏 Blade 表行

【问题标题】：Show and hide Blade table rows with Alpine JS使用 Alpine JS 显示和隐藏 Blade 表行
【发布时间】：2021-10-22 11:20:58
【问题描述】：

我正在使用带有 Laravel 8.x 的 Blade，并希望在 Alpine JS (v3) 中使用 x-show 显示或隐藏表格行。

<table>
  @foreach($items as $item)
  <div x-data="{show: false}">
    <tr>
      <td>
        <button type="button" x-on:click="show = !show">
          Toggle Show
        </button>
      </td>
    </tr>
    <tr x-show="show">
      <td>{{ $item->name }}</td>
    </tr>
  </div>
  @endforeach
</table>

然而，当我这样做时，我得到一个ReferenceError: show is not defined 错误。这种方法是否可能不使用x-for，因为我仍然希望能够访问行中的 Blade 变量。

【问题讨论】：

标签： javascript laravel laravel-blade alpine.js

【解决方案1】：

问题是您不能将<div> 元素放在<table> 元素中。当浏览器执行你的代码时，它会将<div> 放在<table> 元素之外，所以在<tr> 中show 没有定义。

您可以通过将<div> 标记替换为<tbody> 或将一行中的按钮和项目名称作为单独的<td> 并将x-data 附加到<tr> 来解决此问题。

【讨论】：