Using conditional Sub-Arrays using VueJS

Question

I would like to know how to use Vuejs to output a conditional sublist. In this example, not all topics have a subtopic.

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

My HTML so far looks like this:

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

How might I have the list optionally add a sublist if there is one in the data?

tony19 · Accepted Answer · 2022-07-16 02:59:18Z

1

v-if is the directive to be used for conditional rendering.

Here you could use v-if='topic.subtopic' too (as long as the value of the expression evaluates to a truthy boolean value if subtopic existed.)

<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>

You might also be interested in v-else

edited Jul 16, 2022 at 2:59

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 16, 2017 at 4:37

Amresh Venugopal

9,5895 gold badges41 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using conditional Sub-Arrays using VueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related