将标志添加到 Alpine.js UI - 动态 class 名称
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),
},
})
编辑:在我的地图点击功能中我有这个:
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)
: '' }`" />
(我改用了不同的标志库,但逻辑是一样的)
我正在尝试添加:
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)}`,
)
我终于明白了。 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)
: '' }`" />
(我改用了不同的标志库,但逻辑是一样的)