Vuejs 列表循环 - 根据每个 child 的属性添加 class

Question

我有一个从 API 获取的数据列表。我想检查列表中的每个元素是否有 sub-element/child 或没有，然后根据决定添加一个 class。

我的尝试：

<template>
    ...
    <ul>
        <li v-for="nav in navigation" :class="{conditionalClass: isNavDropdown(nav)}">xxxx</li>
    </ul>
    ...
</template>

然后在methods我有这个功能：

<script>
    ...
    methods: {
        isNavDropdown: function (nav) {
            return nav.children[0] !== null
        }
    }
    ...
</script>

这行不通。在控制台中打印 nav 给我一个奇怪的 object，其中包含 reactiveGetter() 和 reactiveSetter()（其中的多个）等元素。

用vuejs甚至可以实现这样的事情吗？还是我需要使用 javascript 技巧来实现？

Answer 1

您可以在 HTML 本身内进行检查，无需单独的方法。

...
<li v-for="nav in navigation" :class="{conditionalClass: nav.children}">xxxx</li>
...

Vuejs 列表循环 - 根据每个 child 的属性添加 class

Vuejs list loop - add class based on properties of each child

javascript

drop-down-menu

vuejs2