eiru_pos/src/components/ProductsGrid.vue

<template lang="pug">
    .products-grid
        product-card(v-for="product in products" :key="product" :item="product" :symbol="symbol")
        product-selector
</template>

<script>
    import ProductCard from '@/components/ProductCard'
    import ProductSelector from '@/components/ProductSelector'

    import { mapGetters, mapActions } from 'vuex'

    export default {
        props: {
            symbol: {
                type: String,
                default: '$',
                required: true
            }
        },
        components: {
            'product-card': ProductCard,
            'product-selector': ProductSelector
        },
        computed: mapGetters({
            products: 'getProducts',
            hasSelectedProduct: 'hasSelectedProduct'
        }),
        methods: mapActions([
            'selectProduct'
        ])
    }
</script>

<style lang="sass">
    .products-grid
        width: 100%
        // height: 100%
        padding-top: 15px
        overflow-y: auto
</style>