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

<script setup lang="ts">
import type { PropType } from 'vue';
import type { IGroup, IServicesGroup } from '@/libs/types';

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

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

const deleteHandler = async () => {
    const group: IGroup = { uid: props.group.uid, name: props.group.name };
    emits('delete', group);
};

const editHandler = () => {
    const group: IGroup = { uid: props.group.uid, name: props.group.name };
    emits('edit', group);
};
</script>
<template>
    <tr>
        <td><button type="button" class="btn btn-danger" @click="deleteHandler">Удалить</button></td>
        <th scope="row">{{ idx }}</th>
        <td><code>{{ group.uid }}</code></td>
        <td>{{ group.name }}</td>
        <td>Всего: (<b>{{ group.services.length }}</b>)</td>
        <td style="text-align: end;"><button type="button" class="btn btn-secondary" @click="editHandler">Редактировать</button></td>
    </tr>
</template>