Привязка класса и стиля на определенных условиях - PullRequest
Новая
       19

Привязка класса и стиля на определенных условиях

0 голосов
/ 18 февраля 2019

Я делаю навигационный компонент с nuxt.js, vue и storyblok.В этой навигации у меня есть несколько предметов.Я получаю свои элементы навигации из API storyblok.я хочу по-разному стилизовать определенные элементы навигации, когда атрибут выделенный в API равен true или false.

Моя проблема в том, что я точно не знаю, как это сделать.это то, что у меня есть на данный момент.

div в моем компоненте навигации: 

<div  v-if="items" class="main-nav">
                <nav>
                    <ul>
                        <li v-bind:class="{ highlighted: item.highlighted === isHighlighted, not_highlighted: item.highlighted === isNotHighlighted}" v-editable="items" :key="index" v-for="(item, index) in items">
                            <LinkType class="nav-link" :link="item.link" :linkText="item.name">{{ item.name }}</LinkType>
                        </li>
                    </ul>
                </nav>
</div>

- вот как я получаю свои данные: 

data() {
        return {
            items: this.$store.state.settings.main_nav ? this.$store.state.settings.main_nav : [],

            isHighlighted: true,
            isNotHighlighted: false


        }
    }

всякий раз, когда я пытаюсь настроить console.log item.выделенный возвращает неопределенную ошибку.Я был бы признателен за помощь.

1 Ответ

0 голосов
/ 18 февраля 2019

Попробуйте, как показано ниже => 

<div  v-if="items" class="main-nav">
    <nav>
        <ul>
            <li v-bind:class="item.highlighted === isHighlighted ? 'highlighted' : 'not_highlighted'" v-editable="items" :key="index" v-for="(item, index) in items">
                <LinkType class="nav-link" :link="item.link" :linkText="item.name">{{ item.name }}</LinkType>
            </li>
        </ul>
    </nav>
</div>

Вы также можете удалить isNotHighlighted: false из данных.

...