products-list-final.vue

<template>
    <ul class="products-list">
        <slot v-if="!products.length" name="empty-basket"></slot>
        <loader v-if="!loaded"></loader>
        <basket-product v-else 
                        v-for="(product, index) in products" 
                        :key="index" 
                        :product-data="product"
                        class="products-list__product"
                        @remove="_removeProductHandler">
        </basket-product>
    </ul>
</template>

<script>
    import eventBus from 'services/event-bus'
    import productService from 'services/product' // We will write ajax delete call here
    
    export default {
        name: 'products-list',
        data() {
            return {
                products: [],
                loaded: false
            };
        },
        created() {
           eventbus.$emit('basketpage:loaded');
           
           eventBus.$on('basket:loading', () => {
              this.loaded = false;
           });
           
           eventBus.$on('basket:updated', (data) => {
              this.products = data.products;
              this.loaded = true;
           });
        },
        methods: {
          _removeProductHandler (data) {
            // Call service to remove product and pass data
            productService.removeProduct(data.id)
          }
        }
    };
</script>