src/components/Item.vue - dev - vdele/app

<script setup lang="ts">
defineModel<{
    uid: string,
    caption: string,
    description: string,
    prices: Array<number>
}>({ required: true });

const emits = defineEmits(['clickOnPrice']);

const clickHandler = (position: {uid: string, caption: string, count:number, amount:number}) => {
    emits('clickOnPrice', position);
};
</script>
<template>
    <div class="card">
        <div class="card-body">
            <span class="h5 card-title">{{ modelValue.caption }}</span>
            <p></p>
            <blockquote class="blockquote mb-0">
                <footer class="blockquote-footer"><i>{{ modelValue.description }}</i></footer>
            </blockquote>
            <p></p>
            <p></p>
            <div class="d-grid gap-2 d-md-flex">
                <button v-for="(price, key) in modelValue.prices" :key="`price-${modelValue.uid}-${key}`" type="button"
                    class="btn btn-secondary"
                    @click="() => { clickHandler({ uid: modelValue.uid, caption: modelValue.caption, count: 1, amount: price }); }">{{
                        price.toLocaleString("ru-RU", {
                            style: "currency", currency: "RUB", minimumFractionDigits: 0,
                            maximumFractionDigits: 2
                        }).replace(',', '.') }}</button>
            </div>
        </div>
    </div>
</template>