Vue component with props

Question

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:

Answer 1

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"
      />