Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I intended to make a filter based on the hastag, that is, only the notifications with the hastags according to the hastag of the props are shown.
this is my component
export default {
props: ['hastag'],
data: function() {
return {
notifications: [{
id: 1,
message: 'Lorem ipsum dolor sit amet',
timeago: ' à 3 horas atás',
title: 'Lorem',
hastags:[
'#Advogado',
'#ReformulaçãoPositiva'
]
},
{
id: 2,
message: 'Curabitur pretium tincidunt lacus.',
timeago: ' à 1 semana atás',
title: 'Curabitur',
hastags:[
'#ReformulaçãoPositiva',
'#RetTesdt'
]
}
]
};
},
computed: {
****
}
}
}
Not sure exactly how you want your filter to work, but if you want to keep notifications with a specified hashtag (by the way you wrote hastag/hastags instead of hashtag/hashtags, so I'll use hashtag/hashtags in my solution):
// Add methods under your computed section if you don't have methods already
methods: {
getNotificationsByHashtag(hashtag) {
return this.notifications.filter(notification => notification.hashtags.includes(hashtag));
}
}
Yes I'm sorry ... hastag :) :) !!
It works but hashtag props is an array.
I have a VUE component with hashtags and I can select several, then the filter shows me only the notifications that contain those hashtags.
How can I iterate this.
thank you very much for your help
Oh sorry I missed the prop. In that case, a computed property would be better.
Also, you should rename your prop to hashtags since it's an array that can contain multiple hashtags. I will use hashtags in my examples. The following examples also assume that it is an array of strings.
There are two main options :
1. Partial match Example: if your prop contains the #he hashtag, it would match notifications with the #he hashtag, but also with the #hello hashtag
computed: {
hashtagsFilteredNotifications() {
return this.notifications.filter(notification => {
return this.hashtags.some(hashtag => notification.hashtags.includes(hashtag));
});
}
}
2. Exact match Example: if your prop contains the #he hashtag, it would match notifications with the #he hashtag, but will NOT match notifications with the #hello hashtag
// The lodash library is installed by default in Laravel apps
import escapeRegExp from 'lodash/escapeRegExp';
computed: {
hashtagsRegExp() {
let regExpFormattedHashtags = this.hashtags.map(hashtag => escapeRegExp(hashtag.replace('#', ''))).join('|');
return new RegExp(`\\B#(${regExpFormattedHashtags})\\b`);
},
hashtagsFilteredNotifications() {
return this.notifications.filter(notification => {
return notification.hashtags.some(hashtag => this.hashtagsRegExp.test(hashtag));
});
}
}
I was able to understand the logic of both solutions and I was able to implement.
I am a beginner in VUE so I really appreciate your help.
@boletinho Perfect ! We all were beginners once, weren't we not ;) ? Please consider marking the answer that helped you the most as "best answer" to mark your issue as resolved.
Have a good day !
Please or to participate in this conversation.