javascript - Vuejs 列表循环 - 根据每个子项的属性添加类

Question

我有一个从 API 获取的数据列表。我想检查列表中的每个元素是否有子元素/子元素，然后根据决策添加一个类。

我的尝试:

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

然后在方法中我有这个函数:

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

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

用vuejs可以实现这样的事情吗？或者我需要使用 javascript 技巧来实现这一点吗？

Answer 1

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

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