値がNULLの場合はオブジェクト項目をスキップします

Question

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: {} 
    } 
}; 

はdata[1].children[101]レンダリングされるべきではないとdata[1].children[100]がヌルになった場合、後でそれはリストから除外されるべきです。

P.S.私は、これはおそらく、データを表現するための最良の方法ではありません知っているが、私はその責任を負いませんよ:)

Answer 1

編集：実際には、シンプルなV-場合はうまくいくかもしれない：

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

を試してみてください。ない場合は、次の操作を行います。

あなたは（アプリケーションインスタンスの前に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> 

Answer 2

ちょうどにv-ifを使用それでやってください。しかし、最初は、nullアイテムとnullという子供のためにtrack-by="id"を使用しないでください。ここでデモを確認できますhttps://jsfiddle.net/13mtm5zo/1/。

おそらく、より良い方法は、レンダリングの前にデータを処理することです。