有没有办法从另一个页面更改 x-show 状态？

Question

我是网络开发的新手，我正在开发一个使用以下项目的项目：

Laravel 混合;
Livewire;
AlpineJS 和;
TailwindCSS.

我有一个导航下拉菜单，其选项与配置文件设置屏幕上显示的组件相关。

我的目标：如果我点击“管理密码”，我希望用户被重定向到配置文件路径并设置x-show = "openTab === 2"。
好像管理密码标签上有一个 @click = "openTab = 2"，但这在页面重新加载时不起作用。默认情况下，个人资料屏幕上 x-data = "{openTab: 1}"。

下拉菜单的代码:

<div class="block text-sm text-gray-700" role="menuitem">
<button class="flex flex-row justify-between w-full px-4 py-2 font-bold leading-5 text-left focus:outline-none hover:no-underline focus:no-underline hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900" type="button" x-on:click="showDefinitions = !showDefinitions">
    {{ __('Settings') }}
    <svg class="w-4 h-4 mt-0.5 transform" x-bind:class="{'-rotate-90 transition duration-300 ease-in-out': showDefinitions === true, 'transition duration-300 ease-in-out': showDefinitions === false}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
</button>
<div x-show.transition.in.duration.100ms.origin.top.left.opacity.scale.10.out.duration.100ms.origin.bottom.left.opacity.scale.10="showDefinitions === true" class="origin-top-left">
    <a href="{{ route('profile') }}" class="block w-full px-4 py-2 leading-5 text-left focus:outline-none hover:bg-gray-100 focus:bg-gray-100">
        <span class="ml-2 text-gray-700 hover:text-gray-900 focus:text-gray-900 hover:no-underline focus:no-underline">
            {{__("My Account")}}
        </span>
    </a>
    <a href="{{ route('profile') }}" class="block w-full px-4 py-2 leading-5 text-left focus:outline-none hover:bg-gray-100 focus:bg-gray-100">
        <span class="ml-2 text-gray-700 hover:text-gray-900 focus:text-gray-900 hover:no-underline focus:no-underline">
            {{__("Manage password")}}
        </span>
    </a>
</div>

个人资料代码

<div x-data="{ openTab: 1 }" class="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
<aside class="py-6 lg:col-span-3">
    <nav>
        <!-- Current: "bg-teal-50 border-teal-500 text-teal-700 hover:bg-teal-50 hover:text-teal-700", Default: "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900" -->
        <button type="button" @click="openTab = 1" x-bind:class="{ 'text-indigo-600 font-medium border-l-4 bg-indigo-50 border-indigo-600 hover:text-indigo-600 hover:bg-indigo-50 hover:border-indigo-600': openTab === 1 }" class="flex items-center w-full px-3 py-2 text-sm font-medium text-gray-900 cursor-pointer focus:outline-none focus:text-indigo-800 hover:text-gray-900 group hover:bg-gray-50">
            <!-- <svg class="flex-shrink-0 w-6 h-6 mr-3 -ml-1 text-gray-400 group-hover:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg> -->
            <svg class="flex-shrink-0 w-6 h-6 mr-3 -ml-1 text-gray-400 group-hover:text-gray-500" x-bind:class="{'text-indigo-500 group-hover:text-indigo-500': openTab === 1}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="truncate">
                {{ __('Profile') }}
            </span>
        </button>
        <button type="button" @click="openTab = 2" x-bind:class="{ 'text-indigo-600 font-medium border-l-4 bg-indigo-50 border-indigo-600 hover:text-indigo-600 hover:bg-indigo-50 hover:border-indigo-600': openTab === 2 }" class="flex items-center w-full px-3 py-2 text-sm font-medium text-gray-900 cursor-pointer focus:outline-none focus:text-indigo-800 hover:text-gray-900 group hover:bg-gray-50">
            <svg class="flex-shrink-0 w-6 h-6 mr-3 -ml-1 text-gray-400 group-hover:text-gray-500" x-bind:class="{'text-indigo-500 group-hover:text-indigo-500': openTab === 2}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
            </svg>
            <span class="truncate">
                {{ __('Update Password') }}
            </span>
        </button>

        <button type="button" @click="openTab = 3" x-bind:class="{ 'text-indigo-600 font-medium border-l-4 bg-indigo-50 border-indigo-600 hover:text-indigo-600 hover:bg-indigo-50 hover:border-indigo-600': openTab === 3 }" class="flex items-center w-full px-3 py-2 text-sm font-medium text-gray-900 cursor-pointer focus:outline-none focus:text-indigo-800 hover:text-gray-900 group hover:bg-gray-50">
            <svg class="flex-shrink-0 w-6 h-6 mr-3 -ml-1 text-gray-400 group-hover:text-gray-500" x-bind:class="{'text-indigo-500 group-hover:text-indigo-500': openTab === 3}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
            </svg>
            <span class="truncate">
                {{ __('2FA') }}
            </span>
        </button>

        <button type="button" @click="openTab = 4" x-bind:class="{ 'text-indigo-600 font-medium border-l-4 bg-indigo-50 border-indigo-600 hover:text-indigo-600 hover:bg-indigo-50 hover:border-indigo-600': openTab === 4 }" class="flex items-center w-full px-3 py-2 text-sm font-medium text-gray-900 cursor-pointer focus:outline-none focus:text-indigo-800 hover:text-gray-900 group hover:bg-gray-50">
            <svg class="flex-shrink-0 w-6 h-6 mr-3 -ml-1 text-gray-400 group-hover:text-gray-500" x-bind:class="{'text-indigo-500 group-hover:text-indigo-500': openTab === 4}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span class="truncate">
                {{ __('Browser Sessions') }}
            </span>
        </button>

        <button type="button" @click="openTab = 5" x-bind:class="{ 'text-red-600 font-medium border-l-4 bg-red-50 border-red-600 hover:text-red-600 hover:bg-red-50 hover:border-red-600': openTab === 5 }" class="flex items-center w-full px-3 py-2 text-sm font-medium text-gray-900 cursor-pointer focus:outline-none focus:text-red-800 hover:text-gray-900 group hover:bg-gray-50">
            <svg class="flex-shrink-0 w-6 h-6 mr-3 -ml-1 text-gray-400 group-hover:text-gray-500" x-bind:class="{'text-red-500 group-hover:text-red-500': openTab === 5}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
            </svg>
            <span class="truncate">
                {{ __('Delete Account') }}
            </span>
        </button>
    </nav>
</aside>

<!-- Update Profile -->
<div x-cloak class="divide-y divide-gray-200 lg:col-span-9" x-show="openTab === 1">
    @livewire('profile.update-profile-information-form')
</div>

<!-- Update Password -->
@if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::updatePasswords()))
<div x-cloak class="divide-y divide-gray-200 lg:col-span-9" x-show="openTab === 2">
    @livewire('profile.update-password-form')
</div>
@endif

<!-- Update 2FA -->
@if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
<div x-cloak class="divide-y divide-gray-200 lg:col-span-9" x-show="openTab === 3">
    @livewire('profile.two-factor-authentication-form')
</div>
@endif

<!-- Update Browser Sessions -->
<div x-cloak class="divide-y divide-gray-200 lg:col-span-9" x-show="openTab === 4">
    @livewire('profile.logout-other-browser-sessions-form')
</div>

<!-- Delete Account -->
<div x-cloak class="divide-y divide-gray-200 lg:col-span-9" x-show="openTab === 5">
    @livewire('profile.delete-user-form')
</div>

如果有办法让我的问题更清楚，请告诉我，我也是新来的。我在那里寻找了许多解决方案，none 对我有用。提前致谢！

Answer 1

单击 Manage password 将转到名为配置文件的新路径。所以 alpine 组件将再次初始化。所以设置 openTab = 2 的可能方法是在渲染时。

我们可以使用请求session来实现。让我逐步描述我的想法。

截取profile路由，添加session变量设置openTab.

所以让我们定义另一个名为 manage-password 的示例路由，它设置 session 变量并重定向到 profile 路由。

所以在web.php

Route::get('/manage-password', function () {
    return redirect()->route('profile')->with('openTab', 2);
})->middleware(['auth:sanctum', 'verified'])->name('manage-password');

在 blade 文件中将路由 link 从 profile 更改为 manage-password。

  <a href="{{ route('manage-password') }}" class="block w-full px-4 py-2 leading-5 text-left focus:outline-none hover:bg-gray-100 focus:bg-gray-100">
        <span class="ml-2 text-gray-700 hover:text-gray-900 focus:text-gray-900 hover:no-underline focus:no-underline">
            {{__("My Account")}}
        </span>
    </a>

使用 profile 组件中的 session 变量来决定 openTab


<div x-data="{ openTab: {{ session()->get('openTab',1) }} }" class="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">

....

</div>

请注意，我已将 openTab 的默认值设置为 1。因此，如果未设置 session 变量，它将默认为 1。

有没有办法从另一个页面更改 x-show 状态？

Is there a way to change x-show state from another page?

javascript

laravel

alpine.js