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