Unable to filter items based on category

Hey guys,

I'm trying to create a component that deals with listing items ("cards") and offering the user the ability to filter those based on a set of categories (all), or only one category.

I can't figure out what I did wrong. Any suggestions will be greatly appreciated.

Code Sandbox here: https://codesandbox.io/s/young-haze-xii4gn?file=/src/components/HelloWorld.vue

<script setup>
/* ----- Imports ----- */
import {computed, onMounted, ref} from 'vue';
/* ----- /Imports ----- */

/* ----- Props ----- */
/* ----- /Props ----- */

/* ----- Data ----- */
const catOne = computed(() =>
    'https://fakeimg.pl/480x320/C6011F/eae0d0/?retina=1&font=noto&text=1st Cat'
);
const catTwo = computed(() =>
    'https://fakeimg.pl/480x320/568203/eae0d0/?retina=1&font=noto&text=2nd Cat'
);
const catThree = computed(() =>
    'https://fakeimg.pl/480x320/720e9e/eae0d0/?retina=1&font=noto&text=3rd Cat'
);

const cards = ref([]);

const categories = ref([]);

const setCategories = (cat = [1]) => {
    categories.value = cat;
};

const categoriesSelected = computed(() => {
    let filter =  categories.value.filter((card) => card.cat);
    console.log( filter );
    return filter;
});

onMounted(() => {
    cards.value = [
        {
            id: 1,
            cat: 1,
            title: 'Lorem',
            href: catOne,
        },
        {
            id: 2,
            cat: 2,
            title: 'Ipsum',
            href: catTwo,
        },
        {
            id: 3,
            cat: 3,
            title: 'Dolor',
            href: catThree,
        },
        {
            id: 4,
            cat: 1,
            title: 'Sit',
            href: catOne,
        },
        {
            id: 5,
            cat: 2,
            title: 'Amet',
            href: catTwo,
        },
        {
            id: 6,
            cat: 3,
            title: 'Consectetur',
            href: catThree,
        },
        {
            id: 7,
            cat: 1,
            title: 'Adispicing',
            href: catOne,
        },
        {
            id: 8,
            cat: 2,
            title: 'Elit',
            href: catTwo,
        },
    ];
    
    categories.value = [1, 2, 3];
});
/* ----- /Data ----- */
</script>

<template>
<div class="my-16 p-32 w-full bg-yellow-400">
    <button
        class="w-24 bg-orange-750 text-white rounded"
        @click="setCategories([1, 2, 3])"
    >
        All
    </button>
    
    <button
        class="w-24 bg-orange-750 text-white rounded ml-4"
        @click="setCategories([1])"
    >
        Cat 1
    </button>
    
    <button
        class="w-24 bg-orange-750 text-white rounded ml-4"
        @click="setCategories([2])"
    >
        Cat 2
    </button>
    
    <button
        class="w-24 bg-orange-750 text-white rounded ml-4"
        @click="setCategories([3])"
    >
        Cat 3
    </button>
    
</div>

<div class="grid grid-cols-4 place-items-center gap-24 w-full mb-32">
    <div
        v-for="card in categoriesSelected"
        :key="card.id"
        class="w-48 h-32 bg-orange-750 rounded-2xl overflow-hidden"
    >
        <img
            :src="card.href.value"
            :alt="card.title"
            class="w-full"
        />
    </div>
</div>
</template>

<style lang="scss" scoped>

</style>

LaryAI

3 years ago

Best Answer

Level 58

The issue with the code is that the filter function in the categoriesSelected computed property is not correctly filtering the cards based on the selected categories. Instead of filtering the cards based on the cat property, it is filtering based on the index of the category in the categories array. To fix this, we need to modify the filter function to check if the cat property of the card is included in the categories array. Here's the updated code:

const categoriesSelected = computed(() => {
  return cards.value.filter((card) => {
    return categories.value.includes(card.cat);
  });
});

With this change, the cards will be correctly filtered based on the selected categories.

1 like

DanielRønfeldt

3 years ago

Level 10

@laryai stellar solution! PS: YES, I'm aware @laryai is not a person... yet! :))

Please or to participate in this conversation.