eiru_pos/src/components/CartItem.vue

<template lang="pug">
        .cart-item
            h3.item-name {{ item.name }}
            input.item-quantity(type="text" :value="item.qty")
            span.item-x x
            span.item-price Gs {{ item.list_price }}
            span.item-equals =
            span.item-subtotal Gs {{ item.list_price * item.qty }}
</template>

<script>
    export default {
        props: {
            item: {
                type: Object,
                required: true,
                default: () => {
                    return {}
                }
            }
        },
        mounted() {
            this.$set(this.item, 'qty', 1)
        }
    }
</script>

<style lang="sass">
    .cart-item
        width: 98%
        height: 85px
        border-bottom: 1px solid #d3d3d3

        .item-name
            width: 100%
            height: 15px
            margin: 5px
            float: left
            font:
                size: 11pt

        .item-quantity
            width: 50px
            height: 30px
            margin-top: 6px
            text-align: right
            float: left

        .item-x
            width: 20px
            height: 20px
            margin-top: 12px
            text-align: center
            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
            float: right
            font-weight: bold
</style>