Vuejs list loop - 根據每個子項的屬性添加類

Question

我有從API中獲取的數據列表。我想檢查列表中的每個元素是否有子元素/子元素，然後根據決策添加一個類。

我嘗試：

<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爲我提供了一個奇怪的對象，其元素如reactiveGetter()和reactiveSetter()（多個）。

甚至有可能用vuejs來實現這樣的事情嗎？或者我需要使用JavaScript技巧來實現這一目標？

Answer 1

您可以檢查您的HTML本身，而不需要單獨的方法。

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