AlpineJs显示选择选项中的数据

Question

我尝试阅读有关Alpine和Select的人的帖子，但没有一个对我有用。 我想根据选定的选项渲染一些组件。

@extends('layouts.exchange')

@section('content')
<div>
    <div class="sm:hidden">
        <select aria-label="Selected tab" class="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 transition duration-150 ease-in-out border-gray-300 form-select focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
            <option selected>Profile Information</option>
            <option>Two Factor Authentication</option>
            <option>Update Password</option>
            <option>Browser Sessions</option>
            <option>Delete Account</option>
        </select>
    </div>
    <div class="hidden sm:block">
        <div class="border-b border-gray-200">
            <nav x-data="{ openTab: 1 }" class="flex -mb-px">
                <a @click="openTab = 1" href="#" x-bind:class="{ 'text-indigo-600 border-indigo-500 hover:text-indigo-600 focus:text-indigo-800 focus:border-indigo-700': openTab === 1 }" class="px-1 py-4 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent focus:no-underline hover:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300" aria-current="page">
                    Profile Information
                </a>
                <a @click="openTab = 2" href="#" x-bind:class="{ 'text-indigo-600 border-indigo-500 hover:text-indigo-600 focus:text-indigo-800 focus:border-indigo-700': openTab === 2 }" class="px-1 py-4 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent focus:no-underline hover:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
                    Two Factor Authentication
                </a>
                <a @click="openTab = 3" href="#" x-bind:class="{ 'text-indigo-600 border-indigo-500 hover:text-indigo-600 focus:text-indigo-800 focus:border-indigo-700': openTab === 3 }" class="px-1 py-4 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent focus:no-underline hover:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
                    Update Password
                </a>
                <a @click="openTab = 4" href="#" x-bind:class="{ 'text-indigo-600 border-indigo-500 hover:text-indigo-600 focus:text-indigo-800 focus:border-indigo-700': openTab === 4 }" class="px-1 py-4 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent focus:no-underline hover:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
                    Browser Sessions
                </a>
                <a @click="openTab = 5" href="#" x-bind:class="{ 'text-indigo-600 border-indigo-500 hover:text-indigo-600 focus:text-indigo-800 focus:border-indigo-700': openTab === 5 }" class="px-1 py-4 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent focus:no-underline hover:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300">
                    Delete Account
                </a>
            </nav>
        </div>
        <div class="py-10 mx-auto max-w-7xl sm:px-6 lg:px-8" x-show="openTab === 1">
            @livewire('profile.update-profile-information-form')
        </div>
        <div class="py-10 mx-auto max-w-7xl sm:px-6 lg:px-8" x-show="openTab === 2">
            @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::updatePasswords()))
            
                <div class="mt-10 sm:mt-0">
                    @livewire('profile.update-password-form')
                </div>
            @endif
        </div>
        <div class="py-10 mx-auto max-w-7xl sm:px-6 lg:px-8" x-show="openTab === 3">
            @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())

                <div class="mt-10 sm:mt-0">
                    @livewire('profile.two-factor-authentication-form')
                </div>
            @endif
        </div>

        <div class="py-10 mx-auto max-w-7xl sm:px-6 lg:px-8" x-show="openTab === 4" class="mt-10 sm:mt-0">
            @livewire('profile.logout-other-browser-sessions-form')
        </div>

        <div class="py-10 mx-auto max-w-7xl sm:px-6 lg:px-8" x-show="openTab === 5" class="mt-10 sm:mt-0">
            @livewire('profile.delete-user-form')
        </div>
    </div>
</div>

@endsection

如您所见，我可以使用选定的标签来做到这一点。

我在此项目上使用LaravelMix和Livewire。