product-final.vue

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

  <div class="basket-product__prices">
    <span v-if="productData.price.promo" class="basket-product__price | price price--type_promo">{{productData.price.promo}}</span>
    <span class="basket-product__price | price" :class="productData.price.promo? 'price--type_old' : '' ">{{productData.price.base}}</span>
  </div>
  
  <span @click="_removeClickHandler">X</span>

</li>
</template>

<script>
export default {
        name: 'basket-product',
        props: {
            productData: {
                imagePath: String,
                brand: String,
                name: String,
                itemId: String,
                color: String,
                price: {
                    base: String,
                    promo: String
                }
            }
        },
        methods: {
          _removeClickHandler () {
          
          // Emit custom event on component and pass its id
            this.$emit('remove', {id: this.productData.itemId});
          }
        }
        
        
    };
</script>