Как я могу отобразить элементы, даже если их родительская директива v-if не совпадает?

Question

Я получил объект.Шаблон повторяется по этому.Я хочу сказать Vue: если в этом объекте есть свойство "link", то оберните следующие элементы тегом, иначе все равно покажите его.

Я пробовал его с помощью слотов.Это не работает, невозможно открыть элемент HTML и закрыть его в различных областях.

Некрасивый способ прокомментирован в разделе шаблона.Можно ли избежать избыточности?

Итак, мой объект

data() {
    return {
        items: [
            {
                text: 'item with link',
                link: '#'
            },
            {
               text: 'item without link',
                // no link prop !!!
            },
        ]
    }
}

Шаблон:

<template>
    <div>
        <div v-for="(item, i) in items" :key="i">
            <a v-if="item.link" :href="item.link">
                <!-- how to display this <p> with or without the parent -->
                <p>{{ item.text }}</p>
            </a>
            <!-- one possibility is to set a negation to <p> again, but its not nice -->
            <p v-if="!item.link">{{ item.text }}</p>
        </div>
    </div>
</template>

результат должен быть

<div>
    <div>
        <a href="#">
            <p>item with link</p>
        </a>
    </div>
    <div>
        <p>item without link</p>
    </div>
</div>

Answer 1

Почему бы вам не использовать v-else, как показано ниже?

<template>
    <div>
        <div v-for="(item, i) in items" :key="i">
            <a v-if="item.link" :href="item.link">
                <p>{{ item.text }}</p>
            </a>
            <p v-else>{{ item.text }}</p>
        </div>
    </div>
</template>