CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2
thelandog
thelandog

Reputation: 734

Vue JS - Conditionally show the information in one component

I have a component that reactively displays the data contained in an array of objects. At the moment, the component displays both objects, but I would like it to display one based on a condition. How can I have one or the other object displayed based on the state of a property named premiumActivated?

<template>
  <div>
    <div class="background-div">
      <div class="page-info-inner">
          <PremiumContent v-for="item in premiumContent"
                          :key="item.infoText" 
                          :info-text="item.infoText" 
                          :button-text="item.buttonText"
                          :button-callback="null"
                          :subscription-text="item.subscriptionText" />
      </div>
    </div>
  </div>
</template>

<script>
  import PremiumContent from '../../../components/partials/settings/Premium';
  
  export default {
    name: 'MyComponent',
    components: {PremiumContent},
    data: () => ({
      premiumActivated: false,
      premiumContent: [
        { 
          infoText: "this is the content that should appear if premiumActivated is false",
          buttonText: "button text",
        },
        { 
          infoText: "this is the content that should appear if premiumActivated is true",
          buttonText: "button text",
          subscriptionText: 'extra text',
        },
      ]
    }),

Upvotes: 3

Views: 659

Answers (1)

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

You can make use of computed property in Vue to decide which object from the array needs to display.

computed: {
    displayContent () {
        return this.premiumActivated ? premiumContent[1] : premiumContent[0]
    }
}

Your PremiumContent will look like this:

<PremiumContent
                          :key="displayContent.infoText" 
                          :info-text="displayContent.infoText" 
                          :button-text="displayContemt.buttonText"
                          :button-callback="null"
                          :subscription-text="displayContent.subscriptionText" />

EDIT: Another solution can be to make use of computed or mounted hook.

computed () {
    this.item = this.premiumActivated ? premiumContent[1] : premiumContent[0]
}

Upvotes: 3

Related Questions