Блог

Я действительно новичок в веб-разработке, и я работаю над проектом, который использует:

• Laravel Mix;
• 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 (LaravelFortifyFeatures::enabled(LaravelFortifyFeatures::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 (LaravelFortifyFeatures::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>
 

Если есть способ прояснить мою проблему, пожалуйста, скажите мне, я тоже новичок здесь.
Я искал много решений, и ни одно из них не сработало для меня.
Заранее спасибо!

Щелчок Manage password приведет к новому маршруту с именем profile . Таким образом, компонент alpine снова инициализируется. Таким образом, возможный способ установить openTab = 2 значение — это когда оно отображается.

Для этого мы можем использовать сеанс запроса. Позвольте мне описать мою идею поэтапно.

1. Перехватите profile маршрут и добавьте переменную сеанса для установки 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');

 

2. Измените ссылку маршрута 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>
 

3. Используйте переменную сеанса в profile компоненте, чтобы определить 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. Поэтому, если переменная сеанса не установлена, по умолчанию она будет равна 1.