Currently, I am working with the following Array:
const contactInfo = computed(() => {
return [
{
id: 'address',
icon: 'detail/clubLocation',
text: `${props.data.contactInfo.address}`
},
{
id: 'phone',
icon: 'contactInfo/phone',
text: `${props.data.contactInfo.phone}`
},
{
id: 'mail',
icon: 'contactInfo/mail',
text: `${props.data.contactInfo.email}`
},
{
id: 'instagram',
icon: 'contactInfo/instagram',
text: `${props.data.contactInfo.instagram}`
},
{
id: 'facebook',
icon: 'contactInfo/facebook',
text: `${props.data.contactInfo.facebook}`
}
]
})
However, I recently received notice that these fields are optional. Therefore, I need to handle the situation of text ⇒ null and undefined/''. To address this, I created the following computed method:
const contactInfoFiltered = computed(() => {
return contactInfo.value.filter(
info => info.text !== null || info.text !== ''
)
})
Despite my efforts, the icons are still displaying when they shouldn't be, and I'm unsure where I went wrong.
Any assistance would be greatly appreciated!