使用條件子陣列使用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> 

我怎麼可能具有列表選擇添加一個子表，如果有一個數據？

Answer 1

v-if是用於條件呈現的指令。

在這裏，你可以使用v-if='topic.subtopic'太（只要表達式的值計算結果爲truthy布爾值，如果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