Changing button innerHTML in a dropdown menu after selecting an item

Question

I am using alpineJs to show a language selector with flags.

I need to change the content (language + flag) of a button after selecting another language, i don't know how to link between the button and the items of the dropdown menu, the active language shouldn't appear in the dropdown menu.

<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>

Here is a codepen https://codepen.io/alchy/pen/ExyZZgg of what i achieved

Answer 1

This is working code. Just check it on your side.

<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>