Есть ли способ использовать условный рендеринг в рендеринге списков (v-for) в Vue JS

Question

Я использую List Rendering (v-for) в своем проекте, чтобы напечатать каждый элемент в моем массиве, чтобы показать информацию о серии книг.

Однако я пытаюсь использовать условный рендеринг в этом l oop, чтобы напечатать количество li элементов, содержащих тег категории книги.

Я не хочу, чтобы li отображался в DOM, если в моем массиве нет данных. Например, для первой книги, Моби Дика, ul для тегов книги будет просто содержать два элемента списка HTML.

Как это можно сделать? Пока у меня есть следующее ...

<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}}</li>
                    <li v-if="">{{book.tagTwo}}</li>
                    <li v-if="">{{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"
        }
    ]
  }
});

Answer 1

Исходя из вашего вопроса, если вы хотите сохранить три <li> элемента, тогда просто вы можете проверить, существуют ли соответствующие теги или нет, как показано ниже:

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