eiru_purchases/src/components/product/CartItem.vue

<template lang="pug">
    li.cart-item
        h3.item-name {{ item.displayName }}
        input.item-quantity(:value='quantity' v-model='quantity' number)
        span.item-x x
        span.item-price {{ item.price }}
        span.item-equals =
        span.item-subtotal {{ item.price * item.qty }}
        .cart-item-options-wrapper
            .cart-item-options
                .cart-item-option(class='fa fa-plus' @click='addToCart(item)')
                .cart-item-option(class='fa fa-minus' @click='decrementFromCart(item)')
                .cart-item-option(class='fa fa-trash' @click='removeFromCart(item)')
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        props: {
            item: {
                type: Object,
                required: true,
                default: {}
            }
        },
        computed: {
            quantity: {
                get() {
                    return this.item.qty || 1
                },
                set(value) {
                    this.item.qty = value || 1
                }
            }
        },
        methods: {
            ...mapActions([
                'addToCart',
                'decrementFromCart',
                'removeFromCart'
            ])
        },
        mounted() {
            this.$set(this.item, 'qty', 1)
            this.$set(this.item, 'price', this.item.standardPrice)
        }
    }
</script>

<style lang="sass">
    .cart-item
        width: 100%
        height: 85px
        list-style: none outside none
        border-bottom: 1px solid #d3d3d3
        box-sizing: border-box
        position: relative
        &:nth-child(1)
            border-top: 1px solid #d3d3d3
        &:hover
            transition-duration: 1000ms
            border-bottom: 2px solid #7c7bad
        .item-name
            width: 100%
            height: 20px
            margin: 10px 0 5px 0
            float: left
            font-size: 8pt
        .item-quantity
            width: 50px
            height: 28px
            margin-top: 6px
            text-align: right
            float: left
        .item-x
            width: 20px
            height: 20px
            margin-top: 12px
            text-align: right
            float: left
        .item-price
            width: 80px
            height: 20px
            margin-top: 12px
            text-align: right
            float: left
        .item-equals
            width: 20px
            height: 20px
            margin-top: 12px
            text-align: center
            float: left
        .item-subtotal
            width: 100px
            height: 20px
            margin-top: 12px
            padding-right: 15px
            text-align: right
            font-weight: bold
        .cart-item-options-wrapper
            width: 100%
            height: 20px
            position: absolute
            bottom: 0
            display: flex
            justify-content: center
            .cart-item-options
                width: 90px
                height: 20px
                border: 1px solid #d3d3d3
                border-bottom: none
                display: flex
                justify-content: center
                .cart-item-option
                    width: 18px
                    height: 18px
                    margin: 0 5px
                    color: #666
                    &:hover
                        cursor: pointer
                    &.fa
                        padding-left: 2px
                        line-height: 20px
                        &.fa-plus:hover
                            color: #2196f3
                        &.fa-minus:hover
                            color: #ffc107
                        &.fa-trash:hover
                            color: #f44336
</style>