Пропустить объекты объекта, если значение равно нулю

Question

У меня есть вложенный цикл for ... in в vue js. Я пытаюсь пропустить элементы, если значение элемента равно null. Вот HTML код:

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

null элементы могут присутствовать в обоих item и item.children объектов.

Например:

var data = { 
    1: { 
     id: 1, 
     title: "This should be rendered", 
     children: { 
      100: { 
       id: 100, 
       subtitle: "I am a child" 
      }, 
      101: null 
     } 
    }, 
    2: null, 
    3: { 
     id: 3, 
     title: "Should should be rendered as well", 
     children: {} 
    } 
}; 

С помощью этих данных data[1].children[101] не должны быть оказаны, и если data[1].children[100] становится нулевым позже он должен быть исключен из списка.

P.S. Я знаю, что это, вероятно, не лучший способ представления данных, но я не отвечаю за это :)

Answer 1

Edit: На самом деле, простой v-если может работать:

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

Дайте ему попробовать. Если нет, то сделать это:

Вы можете добавить фильтр для этого (в main.js, прежде чем, например App):

Vue.filter('removeNullProps',function(object) { 
    // sorry for using lodash and ES2015 arrow functions :-P 
    return _.reject(object, (value) => value === null) 
}) 

затем в шаблоне:

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

Answer 2

Просто используйте v-if для сделайте с этим. Но во-первых, не используйте track-by="id" из-за null предмета и null ребенка. Вы можете проверить демо здесь https://jsfiddle.net/13mtm5zo/1/.

Возможно, лучший способ - это обработать данные перед рендерингом.