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

Question

我将 Blade 与 Laravel 8.x 一起使用，并希望在 Alpine JS (v3) 中使用 x-show 显示或隐藏 table 行。

<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 变量。

Answer 1

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

您可以解决此问题，方法是将 <div> 标记替换为 <tbody> 或将按钮和项目名称放在一行中作为单独的 <td> 并将 x-data 附加到 <tr>.

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

Show and hide Blade table rows with Alpine JS

javascript

laravel

laravel-blade

alpine.js