Добавить флаги в Alpine. js UI - Dynami c имя класса - PullRequest
Новая
       26

Добавить флаги в Alpine. js UI - Dynami c имя класса

0 голосов
/ 20 июня 2020

Я пытаюсь добавить:

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

edit: внутри моего on функция щелчка по карте У меня есть это: 

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

1 Ответ

2 голосов
/ 23 июня 2020

Я наконец разобрался. 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)
    : '' }`" />

(я перешел на использование другой библиотеки флагов, но logi c - это то же)

...