[英]Add flags to Alpine.js UI - dynamic class name
我正在尝试添加:
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),
},
})
编辑:在我的 map 点击 function 我有这个:
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)}`,
)
我终于弄明白了。 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)
: '' }`" />
(我切换到使用不同的标志库,但逻辑是一样的)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.