Vue JS - 组件中的反应式内容

Question

我正在尝试根据属性是真还是假来显示组件的数据，以保持所有内容的反应性。 为此，我首先创建了一个对象数组“premiumContent”，其中每个 object 代表我想要在组件中显示的内容类型。 无论“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"
                          :is-visible="item.isVisible" />
      </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",
          // isVisible: 'if premium activated === false > show this object'
        },
        {
          infoText: "this is the content that should appear if premiumActivated is true",
          buttonText: "button text",
          subscriptionText: 'extra text',
          // isVisible: 'if premium activated === true > show this object'
        },
      ]
    }),

Answer 1

将v-show或v-if与item.isVisible一起使用。

v-show 将呈现元素但将其隐藏，而 v-if 将不呈现它直到 isVisible 为真。

Answer 2

我试图根据属性是真还是假来显示组件的数据，以保持一切反应。 为此，我首先创建了一个对象数组“premiumContent”，每个 object 代表我想在组件中显示的内容类型。 无论 '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"
                          :is-visible="item.isVisible" />
      </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",
          // isVisible: 'if premium activated === false > show this object'
        },
        {
          infoText: "this is the content that should appear if premiumActivated is true",
          buttonText: "button text",
          subscriptionText: 'extra text',
          // isVisible: 'if premium activated === true > show this object'
        },
      ]
    }),