Class 和特定条件下的样式绑定

Question

我正在使用 nuxt.js、vue 和 storyblok 制作导航组件。在此导航中，我有一些项目。我正在从 storyblok API 中获取我的导航项目。当 API 中的 'highlighted' 属性等于 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.hightlighted 它返回一个未定义的错误。我会很感激一些帮助。

Answer 1

尝试如下=>

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

Class 和特定条件下的样式绑定

Class and Style binding on certain conditions

vue.js

storyblok

nuxt.js