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