Vue JS - 有条件地在一个组件中显示信息

Question

我有一个组件可以反应性地显示对象数组中包含的数据。目前，该组件显示两个对象，但我希望它根据条件显示一个。如何根据名为 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',
        },
      ]
    }),

Answer 1

您可以利用 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]
}