flaschengeist-frontend/src/components/baruser/CreditLists.vue

<template>
    <v-content>
        <v-container v-for="user in users" :key="user.id">
            <v-card raised shaped>

                <v-list-item three-line>
                    <v-list-item-content>
                        <v-list-item-title class="title">{{user.firstname}} {{user.lastname}}</v-list-item-title>
                        <v-row>
                            <v-spacer/>
                            <v-row>
                                <v-col>
                                    <v-container>
                                        <v-row>
                                            <v-container>
                                                <v-btn @click="addAmount(user.username, 200)" :color="color">2 €</v-btn>
                                            </v-container>
                                        </v-row>
                                        <v-row>
                                            <v-container>
                                                <v-btn @click="addAmount(user.username, 100)" :color="color">1 €</v-btn>
                                            </v-container>
                                        </v-row>
                                    </v-container>
                                </v-col>
                                <v-col>
                                    <v-container>
                                        <v-row>
                                            <v-container>
                                                <v-btn @click="addAmount(user.username, 50)" :color="color">0,50 €</v-btn>
                                            </v-container>
                                        </v-row>
                                        <v-row>
                                            <v-container>
                                                <v-btn @click="addAmount(user.username, 40)" :color="color">0,40 €</v-btn>
                                            </v-container>
                                        </v-row>
                                    </v-container>
                                </v-col>
                                <v-col>
                                    <v-container>
                                        <v-row>
                                            <v-container>
                                                <v-btn @click="addAmount(user.username, 20)" :color="color">0,20 €</v-btn>
                                            </v-container>
                                        </v-row>
                                        <v-row>
                                            <v-container>
                                                <v-btn @click="addAmount(user.username, 10)" :color="color">0,10 €</v-btn>
                                            </v-container>
                                        </v-row>
                                    </v-container>
                                </v-col>
                            </v-row>
                            <v-col align-self="center">
                                <v-container>
                                    <v-row>
                                        <v-container>
                                            <v-list-item-action-text :class="getColor(user.type)">{{(user.amount/100).toFixed(2)}} €</v-list-item-action-text>
                                        </v-container>
                                    </v-row>
                                </v-container>
                            </v-col>
                        </v-row>
                    </v-list-item-content>
                </v-list-item>
            </v-card>
        </v-container>
    </v-content>
</template>

<script>

    export default {
        name: "CreditLists",
        props: {
            users: Array
        },
        data () {
            return {
                color: 'green accent-4'
            }
        },
        methods: {
            addAmount(username, amount) {
                this.$emit("add:amount", username, amount)
            },
            getColor(type) {
                return type === 'credit' ? 'title green--text' : 'title red--text'
            }

        },
        computed: {

        }
    }
</script>

<style scoped>

</style>