34 lines
814 B
Vue
34 lines
814 B
Vue
|
<script setup lang='ts'>
|
||
|
|
import { type Person } from '~/types/yale';
|
||
|
|
import { type PropType } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
person: {
|
||
|
|
type: Object as PropType<Person>,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: "delete-person", id: number): void
|
||
|
|
}>();
|
||
|
|
|
||
|
|
// Handle the clear code button click
|
||
|
|
const handleDeletePersonClick = () => {
|
||
|
|
// Emit the event to the parent component
|
||
|
|
emit("delete-person", props.person.id);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<tr scope="row">
|
||
|
|
<td>{{ person.id }}</td>
|
||
|
|
<td>{{ person.name }}</td>
|
||
|
|
<td>{{ person.phoneNumber }}</td>
|
||
|
|
<td class="flex">
|
||
|
|
<YaleButton type="button" @click="handleDeletePersonClick">
|
||
|
|
<IconTrash />
|
||
|
|
</YaleButton>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</template>
|