Skip null items and null children in Vue v-for

by

A simple v-if might work:

<li v-for="item in items" v-if="item !== null" track-by="id">

Give it a try. If not, do this:

You can add a filter for that (in main.js before your App instance):

Vue.filter('removeNullProps', function(object) {
  return _.reject(object, (value) => value === null)
})

then in the template:

<li v-for="item in items | removeNullProps" track-by="id">
    <ol>
        <li v-for="child in item.children | removeNullProps" track-by="id"></li>
    </ol>
</li>

Leave a Comment

tech