Show and hide Blade table rows with Alpine JS

[howellmartinez]

I am using Blade with Laravel 8.x and would like to show or hide table rows using x-show in Alpine JS (v3).

<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>

When I do this however, I get a ReferenceError: show is not defined error. Is this approach possible without using x-for as I would like to still have access to the Blade variables within the rows.

[SimoTod]

It's possible but div is not a syntactically valid child of thetable tag and a lot of browsers will move it out of table trying to "fix" your HTML. At that point, Alpine will start behaving in a weird way because the DOM is not the one it expects.
Try using tbody instead (you can have as many tbody you want in a table, the purpose of that tag is to group table rows).

<table>
  @foreach($items as $item)
  <tbody 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>
  </tbody>
  @endforeach
</table>

[shailesh1984]

How do we handle multiple rows?

[ekwoka]

What do you mean?

The above has multiple rows.

It has 2 for each of the $items