In my current project, I am utilizing List Rendering (v-for) to display information about various books stored in an array.
One challenge I'm facing is implementing conditional rendering within this loop to dynamically generate li elements that represent each book's category tag.
I want to avoid displaying empty li elements in the DOM. For instance, if we take the first book "Moby Dick", the list of book tags should only include the relevant ones.
How can I achieve this functionality? Here's what I have so far:
<ul>
<li v-for="book in books">
<div class="item">
<div class="item-bd">
<h2>{{ book.title }}</h2>
<ul class="book-tags>
<li v-if="book.tagOne">{{book.tagOne}}</li>
<li v-if="book.tagTwo">{{book.tagTwo}}</li>
<li v-if="book.tagThree">{{book.tagThree}}</li>
</ul>
</div>
</div>
</li>
</ul>
new Vue({
el: '#app',
data: {
books: [
{
title: "Moby Dick",
tagOne: "Kids Book",
tagTwo: "Fiction",
tagThree: ""
},
{
title: "Hamlet",
tagOne: "All Ages",
tagTwo: "Shakespeare",
tagThree: "Classic"
}
]
}
});