lkostrowski

import eventBus from 'services/eventBus';

const deleteApiUrl = '/delete/product/';

function removeProduct(id) {

    axios.delete(deleteApiUrl + id)
        .then((response) => {
            emitBasketChange();
        });

lkostrowski

<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">

lkostrowski

<template>
<li class="basket-product">
  <img :src="productData.imagePath" class="basket-product__image | image">
  <div class="basket-product__info">
    <span class="basket-product__brand">{{productData.brand}}</span>
    <span class="basket-product__name">{{productData.name}}</span>
    <span class="basket-product__product-number">{{productData.itemId}}</span>
    <span class="basket-product__color">{{productData.color}}</span>
  </div>

lkostrowski

<template>
    ... template is the same
</template>

<script>
    import eventBus from 'services/event-bus'

    export default {
        name: 'products-list',
        data() {

lkostrowski

import eventHub from 'services/_eventBus'; 

const cartRequestUrl = '/get/basket' // Url to our backend 

function getBasket( ) {
    eventHub.$emit('basket:loading'); // Emit loading so components can show loaders 

    // Make api call
    axios.get( cartRequestUrl ).then( ( response ) => {
        emitBasketUpdate(response.data); 

lkostrowski

import Vue from 'Vue';

const eventBus = new Vue();

export default eventBus;

lkostrowski

<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">
        </basket-product>

lkostrowski

<template>
<li class="basket-product">
  <img :src="productData.imagePath" class="basket-product__image | image">
  <div class="basket-product__info">
    <span class="basket-product__brand">{{productData.brand}}</span>
    <span class="basket-product__name">{{productData.name}}</span>
    <span class="basket-product__product-number">{{productData.itemId}}</span>
    <span class="basket-product__color">{{productData.color}}</span>
  </div>