I need some help finding the best way to separate the data below by type:
data: [
{ name: 'discounts_offers', type: 'EMAIL', consent: true },
{ name: 'newsletter', type: 'EMAIL', consent: true },
{ name: 'product_upgrade', type: 'EMAIL', consent: true },
{ name: 'sms_offer', type: 'SMS', consent: true },
{ name: 'post_offer', type: 'POST', consent: true }
]
I have a component inside a page which loops through the list above:
<CommunicationPreference
v-for="(communication, index) in communicationPreferences"
:key="index"
:communication="communication"
/>
But I actually need to create two sections with headings and depending on the communication type then loop through, like the image attached:
CodePudding user response:
You could use computed for this. One computed for email types and one for others (using .filter):
<script>
data () {
return {
dataInfo: [
{ name: 'discounts_offers', type: 'EMAIL', consent: true },
{ name: 'newsletter', type: 'EMAIL', consent: true },
{ name: 'product_upgrade', type: 'EMAIL', consent: true },
{ name: 'sms_offer', type: 'SMS', consent: true },
{ name: 'post_offer', type: 'POST', consent: true }
]
}
},
computed: {
dataTypeEmail () {
return this.dataInfo.filter(e => e.type === 'EMAIL')
},
dataTypeNotEmail () {
return this.dataInfo.filter(e => e.type !== 'EMAIL')
}
}
</script>
Then in your template you should use v-for and the corresponding computed ref:
<h1>Your emails</h1>
<CommunicationPreference
v-for="(communication, index) in dataTypeEmail"
:key="index"
:communication="communication"
/>
<h1>Others (not email)</h1>
<CommunicationPreference
v-for="(communication, index) in dataTypeNotEmail"
:key="index"
:communication="communication"
/>