javascript - Alpine.js UI にフラグを追加 - 動的クラス名

Question

私は追加しようとしています:

https://github.com/lipis/flag-icon-css

誰かがマップボックスの国をクリックしたときにフラグを表示できるように、アプリに

これを行う方法をお勧めする方法はありますか？

私は次のことを試しましたが、私は得るTypeError: (void 0) is undefined

<span class="flag-icon" x-bind:class="{ [`flag-icon-${$store.ui.clicked.flag}`]: true }">
    <h3 class="pt-3 mb-3 ml-5 text-lg " x-text="$store.ui.clicked.name">Country / City name</h3>
</span>

Spruce.store('ui', {
    clicked: {
        name: 'Welcome!',
        u: 'US',
        flag: (this.region_ident ?? this.u).toLowerCase().slice(0, 2),
    },
})

編集：マップ上のクリック機能の中に私はこれを持っています：

    Spruce.store('ui').clicked = {
        ...Spruce.store('ui').clicked,
        city: e.features[0].properties,
        name,
    }

多分私は試すことができます：

$el.addClass(`flag-icon-${$store.ui.clicked.flag}`)

しかし、私はそれをどこに置くべきかわかりません。

これは機能しますが、Alpine.js ソリューションの方が簡潔だと思います。

    document.getElementById('flag-show-bottom').removeAttribute('class')
    document
        .getElementById('flag-show-bottom')
        .classList.add(
            'flag-icon',
            `flag-icon-${e.features[0].properties.u.toLowerCase().slice(0, 2)}`,
        )