我正在使用nuxt.js,vue和storyblok制作导航组件。在这个导航中我有几个项目。我正在从storyblok API中获取我的导航项目。当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.hightlighted它会返回一个未定义的错误。我会感激一些帮助。
请尝试以下=>
<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。