Не показывать div, если реквизиты не имеют значений

Question

У меня есть следующий компонент

<template>
  <div class="pt-20 pb-4 px-6 xl:px-40 bg-theme-primary">
    <div class="text-center mb-24">
      <h1 class="text-xl lg:text-2xl uppercase font-bold mb-2">{{ mainTitle }}</h1>
      <p class="text-base">{{ mainText }}</p>
    </div>

    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "FeaturesWGrid",
  props: {
    mainTitle: String,
    mainText: String
  }
};
</script>

и следующая реализация

<FeaturesWGrid>
  <Grid>
    <div class="bg-theme-secondary rounded py-4 px-12">
      <h2 class="text-xl font-medium mb-6">General</h2>
      <Accordion question="Start a live chat" answer="24/7" />
      <Accordion question="Start a live chat" answer="24/7" />
      <Accordion question="Start a live chat" answer="24/7" />
      <Accordion question="Start a live chat" answer="24/7" />
      <Accordion question="Start a live chat" answer="24/7" />
    </div>
  </Grid>
</FeaturesWGrid>

Пока это просто фиктивный контент, однако моя проблема в этом разделе мне не нужна Чтобы добавить mainTitle и mainText, можно ли скрыть <div class="text-center mb-24">, если реквизиты не имеют значений.

Answer 1

Используйте v-if или v-show (если вы wi sh оставляете div просто скрытым)

<div class="text-center mb-24" v-if="mainTitle && mainText">