title: Vuejs list loop - add class based on properties of each child
body: <p>I have a list from the data fetched from an API. I would like to check if each element in list has a sub-element/child or not, and then add a class based on decision.</p>
  
  <p>My attempt:</p>
  
  <pre><code>&lt;template&gt;
      ...
      &lt;ul&gt;
          &lt;li v-for="nav in navigation" :class="{conditionalClass: isNavDropdown(nav)}"&gt;xxxx&lt;/li&gt;
      &lt;/ul&gt;
      ...
  &lt;/template&gt;
  </code></pre>
  
  <p>And then in <code>methods</code> I have this function:</p>
  
  <pre><code>&lt;script&gt;
      ...
      methods: {
          isNavDropdown: function (nav) {
              return nav.children[0] !== null
          }
      }
      ...
  &lt;/script&gt;
  </code></pre>
  
  <p>This doesn't work. Printing <code>nav</code> in console gives me a strange object with elements like <code>reactiveGetter()</code> and <code>reactiveSetter()</code> (multiple of them).</p>
  
  <p>Is it even possible to achieve such a thing with vuejs? Or do I need to use javascript tricks to achieve this?</p>