VueJSを使用する条件付サブアレイの使用

Question

Vuejsを使用して条件付きサブリストを出力する方法を知りたいと思います。この例では、すべてのトピックにサブトピックがあるわけではありません。

new Vue ({ 
    el: '#maincontainer', 
    data: { 
     topics: [ 
      { topicname: 'Introduction' }, 
      { topicname: 'First Chapter', 
       subtopics: [ 
        {subtopicname: 'Test'} 
       ] 
      }, 
     ] 
    } 
}); 

私のHTMLは、これまでのようになります。

<li v-for="topic in topics" id="item-{{$index}}"> 
    {{ topic.topicname }} 
    <ul> 
     <li v-for="subtopic in subtopics"> 
     {{ subtopic.subtopicname }} 
     </li> 
    </ul> 
</li> 

私はデータの1がある場合、リストは、必要に応じてサブリストを追加している場合がありますどのように？

Answer 1

v-ifは、条件付きレンダリングに使用される指示です。ここで

（subtopicが存在する場合truthyブール値に限り、式の値が評価される。）あなたもv-if='topic.subtopic'を使用することができ

<li v-for="topic in topics" id="item-{{$index}}"> 
{{ topic.topicname }} 
    <ul v-if='Array.isArray(topic.subtopic)'> 
    <li v-for="subtopic in topic.subtopics"> 
     {{ subtopic.subtopicname }} 
    </li> 
    </ul> 
</li> 

はまたv-else

に興味があるかもしれません