我有一个组件，可以以反应方式显示对象数组中包含的数据。目前，该组件同时显示两个对象，但我希望它根据条件显示一个对象。如何基于名为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',
},
]
}),
您可以在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]
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句