我在vue js中有一个嵌套for … in循环.我想要的是,如果元素的值为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: {}
}
};
使用该数据数据[1].不应该呈现.children [101],并且如果数据[1] .children [100]变为空,则应该从列表中省略它.
附：我知道这可能不是表示数据的最佳方式,但我不负责任:)
解决方法
编辑：实际上,一个简单的v-if可能会起作用：
<li v-for="item in items" v-if="item !== null" track-by="id">
试试看.如果没有,请执行此操作：
您可以为其添加过滤器(在App实例之前的main.js中)：
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>
