eiru_pos/src/components/CartItem.vue

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

<script>
    export default {
        props: {
            item: {
                type: Object,
                required: true,
                default: () => {
                    return {}
                }
            }
        },
        methods: {
            getPrice() {
                return accounting.formatMoney(this.item.list_price, '₲', 0, '.', ',')
            },
            getSubtotal() {
                return accounting.formatMoney(this.item.list_price * this.item.qty, '₲', 0, '.', ',')
            }
        },
        mounted() {
            this.$set(this.item, 'qty', 1)
        }
    }
</script>

<style lang="sass">
    .cart-item
        width: 100%
        height: 84px
        list-style: none outside none
        border-bottom: 1px solid #d3d3d3
        box-sizing: border-box

        &:hover
            background: #f5f5f5
            transition-duration: 1s
            cursor: pointer

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

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