Как правильно указать вложенные v-if?

Question

[Andrej Sharapov]

Есть такая структура компонента

...
<div class="role-grid">
    <div class="role-my">
    <h5><strong>Me:</strong></h5>
    <ul class="dots">
    <template v-for="(m, index) in cd.role" :key="index">
    <li v-for="m in m.me">{{ m.li }}</li>
    </template>
    </ul>
    </div>

    <div class="role-others">
    <h5><strong>Others:</strong></h5>
    <ul class="dots">
    <template v-for="(o, index) in cd.role" :key="index">
    <li v-for="o in o.other">{{ o.li }}</li>
    </template>
    </ul>
    </div>
</div>
....

В json файле это выглядит так:

"role": [
            {
                "me": [
                    {
                        "li": "Lorem"
                    },
                    {
                        "li": "Lorem"
                    },
                    {
                        "li": "Lorem"
                    },
                    {
                        "li": "Lorem"
                    }
                ],
                "other": [
                    {
                        "li": "Lorem"
                    },
                    {
                        "li": "Lorem"
                    }
                ]
            }
        ],

Подскажите, как в шаблоне правильно указать условия, чтобы, при отсутствии данных у одного из блоков (me / other), он не выводился? Ну или просто отсутствие всего блока в json файле.

Т.е. скрыть весь...

<div class="role-others">
    <h5><strong>Others:</strong></h5>
    <ul class="dots">
    <template v-for="(o, index) in cd.role" :key="index">
    <li v-for="o in o.other">{{ o.li }}</li>
    </template>
    </ul>
</div>

...если other выглядит так:

"other": [
                    {
                        "li": ""
                    },
                    {
                        "li": ""
                    }
                ]

Answer 1

[Антон Антон]

<div class="role-others" v-if="cd.role.some(el => el.other.length)">
    <h5><strong>Others:</strong></h5>
    <ul class="dots">
    <template v-for="(o, index) in cd.role" :key="index">
    <li v-for="o in o.other">{{ o.li }}</li>
    </template>
    </ul>
</div>

Ну, и вынести в computed, чтобы кэшировало.