Vue JS-组分中的反应性含量

Question

我正在尝试显示组件的数据，基于属性是真还是假以保持所有的反应性。为此，我首先创建了一个对象数组'Premium content'，每个对象都表示要在组件中显示的内容类型。无论“高级激活”是否为真，这些对象中的一个都应该是可见的。有人能帮我找到一个解决方案来实现这一点吗？我对此还很陌生，所以在语法方面，我往往会把事情弄混。

MyComponent：

<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

可以使用computed属性，该属性通过isvisible条件筛选数组。

export default {
    //...
    data() {
        return {
            premiumContent: [ /** ... your data here */]
        }
    },
    computed: {
        premiumContentFiltered() {
            return this.premiumContent.filter(pc => pc.isVisible);
        }
    }
    //... rest of your code
}

<PremiumContent v-for="(item, i) in premiumContentFiltered" 
                :key="`premium-content-${i}`"
                :item="item"
                :button-callback="null" />

备注：

• item.infotext是一个最终不能唯一的字符串，因此我使用了:key=“premium-content-${i}”作为唯一键。
• :item=item:也许共享整个对象更好，而不是单独共享每个属性，以保持道具更干净

Answer 2

使用v-show或v-if和item.isvisible。

v-show将呈现该元素，但将其保持隐藏，而v-if将不会呈现它，直到isVisible为true。