I am looking to enhance my project by implementing a filtering feature. I currently have a buttons component that will trigger the filter search.

When I click the restaurant button, it should display the shops with a "Restaurant" value in Firestore.

Conversely, when I click the supermarket button, it should show the shops with a "Supermarket" value in Firestore.

Currently, I am using Vuex to retrieve data from "getMenuItems" using mapGetters in Result.vue.

In Buttons.vue, I have added methods to trigger mutations. For instance, pressing the restaurant button will push restaurant data into "restaurantItems" in menu.js.

My goal is for Result.vue to read "restaurantItems" instead of "getMenuItems" when the restaurant button is pressed.

I attempted to use an if statement in the computed property of Result.vue but couldn't find a solution.

If my approach is incorrect, please guide me on the correct way to achieve this.

Buttons.vue

<template>
    <div>
        <section class="button-section">
            <div class="d-flex buttons">
                <b-button class="supermarket" @click.prevent="showSupermarket">Supermarket</b-button>
                <b-button class="restaurant" @click.prevent="showRestaurant">Restaurant</b-button>
        </div>
        </section>
    </div>
</template>

<script>
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();
import { mapGetters } from 'vuex'
import store from '../store'

    export default {
        name: 'Buttons',
        data() {
            return {
                supermarket: "",
                restaurant: ""
            }
        },
        methods: {
            showSupermarket() {
                const supermarketRef = db.collection('Product').where('type', '==', "Supermarket")
                supermarketRef.get()
                    .then(snapshot => {
                    if (snapshot.empty) {
                    console.log('No matching documents.');
                    return;
                    }
                    snapshot.forEach(doc => {
                        const supermarket = doc.data()
                        console.log(supermarket)
                        this.supermarket = supermarket
                        //triger mutation here.
                        this.$store.commit('showSupermarketResult', this.supermarket)
                        //console.log(doc.id, '=>', doc.data());
                    });
                })
                .catch(err => {
                    console.log('Error getting documents', err);
                });
            },
            showRestaurant() {
                const restaurantRef = db.collection('Product').where('type', '==', "Restaurant")
                restaurantRef.get()
                    .then(snapshot => {
                    if (snapshot.empty) {
                    console.log('No matching documents.');
                    return;
                    }
                    snapshot.forEach(doc => {
                        const resutaurant = doc.data()
                        console.log(resutaurant)
                        this.resutaurant = resutaurant
                        this.$store.commit('showRestaurantResult', this.resutaurant)
                        //console.log(doc.id, '=>', doc.data());
                    });
                })
                .catch(err => {
                    console.log('Error getting documents', err);
                });
            },
        }
    }
</script>

Result.vue

<template>
    <div>
    <Navbar />
    <Map />
    <Buttons />
    
    <div class="main">
        
        <section class="cards">
        <div class="card" v-for="(item, index) in getMenuItems" :key="index">
            <div class="card-icons" v-if="item.quantity > 0">
            <div class="card-icon">
            <div class="card__image-container" v-for="(sample, index) in item.sample" :key="index">
                <!-- <router-link to="/product"> -->
                <router-link :to="{name:'Product',params:{id:item.id}}">
                <img
                :src="sample"
                alt="Detailed image description would go here."
                />
                </router-link>
                <div class="card__content">
                    <div class="card__info">
                        <span class="text--medium">{{ item.business }}</span>
                        <span class="card__distance text--medium">{{ item.quantity }} left</span>
                    </div>
                </div>
            </div>
            </div>
            <div class="icons">
            <div class="time">
                <span>until<br>{{ item.limitObject }}</span>
                </div>
                <div class="fav">
                <span>Heart</span>
                </div>
                <div class="price">
                <span>{{ item.initial }}<br>{{ item.sale }}</span>
                </div>
            </div>
            </div>
        </div>
        </section>
    </div>
    </div>
</template>

<script>
import axios from 'axios';
import Navbar from "@/components/Navbar.vue";
import Buttons from "@/components/Buttons.vue";
import Map from "@/components/Map.vue";
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();
import { mapGetters } from 'vuex'


    export default {
        name: "UserLocation",
        data() {
            return {
                address: "",
                error: "",
                spinner: false
            }
        },
        components: {
            Navbar,
            Map,
            Buttons
        },
        created() {
            //vuexfire
            const dbMenuRef = db.collection('Product')
            this.$store.dispatch('setMenuRef', dbMenuRef)
        },        
        computed: {
            ...mapGetters([
                'getMenuItems'
            ])
        },
        methods: {
            
        }
    }
</script>

menu.js

import { firestoreAction } from 'vuexfire'
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();

const dbMenuRef = db.collection('Product')

const state = {
    menuItems:[],
    supermarketItems:[],
    restaurantItems: [],
    store:[]
}

const getters = {
    getMenuItems: state => state.menuItems,
    supermarketItems: state => state.supermarketItems,
    restaurantItems: state => state.restaurantItems
}

const mutations = {
    showSupermarketResult(state, supermarket) {
        state.menuItems.push(supermarket);
    },
    showRestaurantResult(state, restaurant) {
        state.restaurantItems.push(restaurant);
    },
}

const actions = {
    setMenuRef: firestoreAction(context => {
        return context.bindFirestoreRef('menuItems', dbMenuRef)
    }),
    
}

export default {
    state,
    mutations,
    getters,
    actions
}