Vue JS - 하나의 구성 요소에 조건부로 정보를 표시

Vue JS - 하나의 구성 요소에 조건부로 정보를 표시

나는 일련의 오브젝트에 포함된 데이터를 반응적으로 표시하는 구성요소를 가지고 있다.현재 부품에 두 개 모두 표시되지만, 조건에 따라 표시했으면 한다.프리미엄이라는 속성의 상태를 기준으로 하나 또는 다른 개체를 표시하는 방법활성화?

<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',
        },
      ]
    }),

Vue에서 계산된 속성을 사용하여 어레이에서 표시할 개체를 결정할 수 있다.

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

PremiumContent는 다음과 같이 표시됨:

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

편집: 또 다른 해결책은computed또는mounted낚싯바늘을 달다

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

참조URL: https://stackoverflow.com/questions/66734860/vue-js-conditionally-show-the-information-in-one-component