src/components/settings/ServiceTableRow.vue - dev - vdele/app

<script setup lang="ts">
import type { PropType } from 'vue';
import type { IServiceRecord } from '@/libs/types';
import { formatPrice } from '@/utils/index';

const props = defineProps({
    service: {
        type: Object as PropType<IServiceRecord>,
        required: true,
    },
    idx: { 
        type: Number,
        required: true,
    },
});

const emits = defineEmits(['delete', 'edit']);

const deleteHandler = async () => {
    const service: IServiceRecord = { ...props.service};
    emits('delete', service);
};

const editHandler = () => {
    const service: IServiceRecord = { ...props.service };
    emits('edit', service);
};
</script>
<template>
    <tr>
        <td><button type="button" class="btn btn-danger" @click="deleteHandler">Удалить</button></td>
        <th scope="row">{{ idx + 1 }}</th>
        <td><code>{{ service.uid }}</code></td>
        <td>{{ service.caption }}</td>
        <td>{{ service.description }}</td>
        <td>{{ service.prices.map(v => formatPrice(v)) }}</td>
        <td style="text-align: end;">
            <button type="button" class="btn btn-secondary" @click="editHandler">Редактировать</button>
        </td>
    </tr>
</template>