使用条件子阵列使用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