64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
// const route = useRoute();
|
|
// route.params.contactId
|
|
|
|
const contact = ref({
|
|
first: "Your",
|
|
last: "Name",
|
|
avatar: "https://placecats.com/200/200",
|
|
twitter: "your_handle",
|
|
notes: "Some notes",
|
|
favorite: true,
|
|
});
|
|
|
|
function deleteSubmit(event: Event) {
|
|
const response = window.confirm(
|
|
'Please confirm you want to delete this record.'
|
|
);
|
|
if (!response) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="contact">
|
|
<div>
|
|
<img
|
|
:key="contact.avatar"
|
|
:alt="() => `${contact.first} ${contact.last} avatar`"
|
|
:src="contact.avatar"
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>
|
|
<template v-if="contact.first || contact.last">
|
|
{{ `${contact.first} ${contact.last}` }}
|
|
</template>
|
|
<i v-else>No Name</i>
|
|
<ContactFavorite :contact="contact"/>
|
|
</h1>
|
|
<p v-if="contact.twitter">
|
|
<a :href="`https://twitter.com/${contact.twitter}`">{{ contact.twitter }}</a>
|
|
</p>
|
|
<p v-if="contact.notes">{{ contact.notes }}</p>
|
|
<div>
|
|
<form action="edit">
|
|
<button type="submit">Edit</button>
|
|
</form>
|
|
|
|
<form
|
|
action="destroy"
|
|
method="post"
|
|
@submit="deleteSubmit">
|
|
<button type="submit">Delete</button>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |