选择项目后在下拉菜单中更改按钮 innerHTML

Question

我正在使用 alpineJs 显示带有标志的语言选择器。

选择另一种语言后，我需要更改按钮的内容（语言+标志），我不知道如何在按钮和下拉菜单的项目之间链接，活动语言不应该出现在下拉菜单。

<button class="w-full hb:w-4/5 flex items-center px-4 py-3 text-gray-900 bg-gray-300 rounded-sm cursor-pointer focus:outline-none"
    x-on:click="langSelector = true"
>
    <img class="w-4 inline-block rounded-sm" src="https://media.flaticon.com/dist/min/img/flags/fr.svg">
    <span class="ml-2 font-medium">Français</span>
    <svg class="w-3 h-3 ml-auto" 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="3" d="M19 9l-7 7-7-7"></path>
    </svg>
</button>
<ul class="w-full absolute left-0 hb:w-4/5 py-1 pb-2 px-4 bg-gray-900 text-white font-normal rounded-sm"
    x-cloak x-show.transition.origin.top="langSelector"
    x-on:click.away="langSelector = false"
>
    <template x-for="lang in langs" :key="lang.id">
        <li class="pt-2" :id="lang.id"
            @click="activeLang = lang.id"
        >
            <a href="#" class="flex items-center hover:text-green-100 hover:font-medium">
                <img class="w-4 inline-block rounded-sm" :src="`https://media.flaticon.com/dist/min/img/flags/${lang.abv}.svg`">
                <span class="ml-2" x-text="lang.title"></span>
            </a>
        </li>
    </template>
</ul>

这是我取得的成就的代码笔https://codepen.io/alchy/pen/ExyZZgg

Answer 1

这是工作代码。请在您身边检查一下。

<div class="w-1/3 mx-auto relative" x-data="{ 
             langSelector: false, 
             activeLang : 0,
             langs : [
             { id: 0, title: 'Français', abv: 'fr' },
             { id: 1, title: 'English', abv: 'en' },
             { id: 2, title: 'Español', abv: 'es' }
             ] 
             }">
    <button class="w-full hb:w-4/5 flex items-center px-4 py-3 text-gray-900 bg-gray-300 rounded-sm cursor-pointer focus:outline-none" x-on:click="langSelector = true"> <img class="w-4 inline-block rounded-sm" :src="'https://media.flaticon.com/dist/min/img/flags/' + langs[activeLang].abv + '.svg'"> <span class="ml-2 font-medium" x-html=[langs[activeLang].title]>Français</span>
        <svg class="w-3 h-3 ml-auto" 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="3" d="M19 9l-7 7-7-7"></path>
        </svg>
    </button>
    <ul class="w-full absolute left-0 hb:w-4/5 py-1 pb-2 px-4 bg-gray-900 text-white font-normal rounded-sm" x-cloak x-show.transition.origin.top="langSelector" x-on:click.away="langSelector = false">
        <template x-for="lang in langs" :key="lang.id">
            <li class="pt-2" :id="lang.id" @click="activeLang = lang.id, langSelector = false" x-show="activeLang != lang.id">
                <a href="#" class="flex items-center hover:text-green-100 hover:font-medium"> <img class="w-4 inline-block rounded-sm" :src="`https://media.flaticon.com/dist/min/img/flags/${lang.abv}.svg`"> <span class="ml-2" x-text="lang.title"></span> </a>
            </li>
        </template>
    </ul>
</div>