Using map instead of filter shit

Author: realstoman

src/components/projects/ProjectsFilter.vue

@@ -40,6 +40,7 @@ export default {
 		select: {
 			type: String,
 			default: 'projects',
+			required: true,
 		},
 		selectOptions: {
 			type: Array,

src/components/projects/ProjectsGrid.vue

@@ -98,52 +98,16 @@
 import feather from 'feather-icons';
 import ProjectsFilter from './ProjectsFilter.vue';
 import ProjectSingle from './ProjectSingle.vue';
+import projects from '../../data/projects';
 
 export default {
 	components: { ProjectSingle, ProjectsFilter },
 	data: () => {
 		return {
+			projects,
 			projectsHeading: 'Projects Portfolio',
 			selectedProject: '',
 			searchProject: '',
-			projects: [
-				{
-					id: 1,
-					title: 'Google Health Platform',
-					category: 'Web Application',
-					img: require('@/assets/images/web-project-2.jpg'),
-				},
-				{
-					id: 2,
-					title: 'Phoenix Digital Agency',
-					category: 'Mobile Application',
-					img: require('@/assets/images/mobile-project-2.jpg'),
-				},
-				{
-					id: 3,
-					title: 'Project Management UI',
-					category: 'UI/UX Design',
-					img: require('@/assets/images/ui-project-1.jpg'),
-				},
-				{
-					id: 4,
-					title: 'Cloud Storage Platform',
-					category: 'UI/UX Design',
-					img: require('@/assets/images/ui-project-2.jpg'),
-				},
-				{
-					id: 5,
-					title: 'React Social App',
-					category: 'Mobile Application',
-					img: require('@/assets/images/mobile-project-1.jpg'),
-				},
-				{
-					id: 6,
-					title: 'Apple Design System',
-					category: 'Web Application',
-					img: require('@/assets/images/web-project-1.jpg'),
-				},
-			],
 		};
 	},
 	computed: {
@@ -160,10 +124,11 @@ export default {
 	methods: {
 		// Filter projects by category
 		filterProjectsByCategory() {
-			return this.projects.filter((item) => {
+			return this.projects.map((item) => {
 				let category =
 					item.category.charAt(0).toUpperCase() +
 					item.category.slice(1);
+				console.log(category);
 				return category.includes(this.selectedProject);
 			});
 		},

src/data/projects.js

@@ -0,0 +1,40 @@
+const projects = [
+	{
+		id: 1,
+		title: 'Google Health Platform',
+		category: 'Web Application',
+		img: require('@/assets/images/web-project-2.jpg'),
+	},
+	{
+		id: 2,
+		title: 'Phoenix Digital Agency',
+		category: 'Mobile Application',
+		img: require('@/assets/images/mobile-project-2.jpg'),
+	},
+	{
+		id: 3,
+		title: 'Project Management UI',
+		category: 'UI/UX Design',
+		img: require('@/assets/images/ui-project-1.jpg'),
+	},
+	{
+		id: 4,
+		title: 'Cloud Storage Platform',
+		category: 'UI/UX Design',
+		img: require('@/assets/images/ui-project-2.jpg'),
+	},
+	{
+		id: 5,
+		title: 'React Social App',
+		category: 'Mobile Application',
+		img: require('@/assets/images/mobile-project-1.jpg'),
+	},
+	{
+		id: 6,
+		title: 'Apple Design System',
+		category: 'Web Application',
+		img: require('@/assets/images/web-project-1.jpg'),
+	},
+];
+
+export default projects;