CODEWITHSUNDEEP
javascripthtmlcssvue.js
Ben Bagley
Ben Bagley

Reputation: 803

Do not show div if props doesn't have values

I have the following component

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

and the following implementation

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

This is just dummy content for now, however, my issue for this section I don't need to add a mainTitle and mainText is it possible to hide the <div class="text-center mb-24"> if the props don't have any values.

Upvotes: 0

Views: 68

Answers (1)

Anatoly
Anatoly

Reputation: 22783

Use v-if or v-show (if you wish to leave div just hidden)

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

Upvotes: 1

Related Questions