如何使用 AlpineJS 和 Laravel 在 foreach 中隐藏按钮

Question

我开始使用 AlpineJS 并且我有一个 table 我用 fetch 填充。

问题是我已经尝试放置 x-if 和 x-show 条件语句，但它们要么隐藏所有按钮，要么向我显示所有按钮。

我该怎么做？

<div class="iq-card-body" x-data="serviceTenants()" x-init="loadingTable()">

    <table class="table table-bordered table-responsive-md table-striped_ text-center" id="laravel_crud">
        <thead>
            <tr>
                <th>Company</th>
                <th>Plan</th>
                <th>created at</th>
                <td colspan="3"></td>
            </tr>
        </thead>
        <tbody>
        <template x-for="tenant in tenants">
            <tr>
                <td x-text="tenant.name"></td>
                <td x-text="tenant.plan"></td>
                <td x-text="tenant.created"></td>
                <td width="180">
                    <button class="btn iq-bg-info btn-rounded btn-sm my-0 float-left">Upgrade</button>
                    <button class="btn iq-bg-danger btn-rounded btn-sm my-0 float-left ml-2" @click="deleteTenant(tenant.id)">{{__('Delete')}}</button>
                </td>
            </tr>
        </template>
        </tbody>
    </table>
</div>

function serviceTenants(){
        return {
            tenants: [],
            loadBtn: false,
            loadingTable(){
                fetch('list')
                .then(response => response.json())
                .then(data => {
                    this.tenants = data.data;
                });
            }
        }
    }

Answer 1

您可以在循环中使用 if 条件。

<template x-for="tenant in tenants">
  <div>
    <template x-if="tenant.showField === true">
      <div>
        <button class="btn iq-bg-info btn-rounded btn-sm my-0 float-left">Upgrade</button>
        <button class="btn iq-bg-danger btn-rounded btn-sm my-0 float-left ml-2" @click="deleteTenant(tenant.id)">{{__('Delete')}}</button>
      </div>
    </template>

    <template x-if="tenant.showField !== true">
      <div>
        <button class="btn iq-bg-info btn-rounded btn-sm my-0 float-left">Upgrade</button>
        <button class="btn iq-bg-danger btn-rounded btn-sm my-0 float-left ml-2" @click="deleteTenant(tenant.id)">{{__('Delete')}}</button>
      </div>
    </template>

  </div>
</template>

如何使用 AlpineJS 和 Laravel 在 foreach 中隐藏按钮

How to hide a button inside a foreach with AlpineJS and Laravel

laravel

alpine.js