时间戳

首页 > 解决方案 > 向 Alpine.js UI 添加标志 - 动态类名

javascript - 向 Alpine.js UI 添加标志 - 动态类名

问题描述

我正在尝试添加：

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)}`,
        )

标签： javascriptalpine.js

解决方案

我终于弄明白了。x-bind:接受一个表达式。你可以在任何东西上使用它。它真的是多才多艺的。您不必使用:class={ className: bool }格式。

您可以只使用字符串：

<img src="../images/blank.gif" 
x-bind:class="`flag ${ $store.ui.clicked.country 
    ? 'flag-' + $store.ui.clicked.country.region_ident.toLowerCase().slice(0, 2)
    : $store.ui.clicked.city 
    ? 'flag-' + $store.ui.clicked.city.u.toLowerCase().slice(0, 2)
    : '' }`" />

（我切换到使用不同的标志库，但逻辑是相同的）

推荐阅读