Class and Style binding on certain conditions

Question

I'm making a navigation component with nuxt.js, vue and storyblok. In this navigation i have a few items. i'm getting my navi items out of the storyblok API. i want to style certain navi items differently when the 'highlighted' attribute in the API equals to true or false.

My problem is that i dont exactlty know how to do that. this is what i have at this point.

div in my navigation component:

<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>

this is how i retrieve my data:

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

            isHighlighted: true,
            isNotHighlighted: false


        }
    }

whenever i try to console.log item.hightlighted it gives back an undefined error. i would appreciate some help.

Answer 1

Try as below =>

<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>

You can also remove isNotHighlighted: false from data.