car_trader/components/Car/ListingCard.vue

32 lines
1.1 KiB
Vue

<script setup>
const props = defineProps({
listing: Object
});
const emit = defineEmits(['deleteClick']);
const config = useRuntimeConfig();
const handleClick = (id) => {
console.log("handle click");
emit('deleteClick', id);
};
</script>
<template>
<div class="shadow rounded overflow-hidden flex justify-between mb-4">
<div class="flex">
<img :src="`${config.public.supabase.url}/storage/v1/object/public/images/${listing.image}`" alt="" class="w-80 mr-3 h-44"/>
<div class="p-3">
<h1 class="text-2xl">{{ listing.name }}</h1>
<p class="text-blue-400">${{ listing.price }}</p>
</div>
</div>
<div class="p-3 flex">
<NuxtLink class="text-blue-400 mr-4" :to="`/profile/listings/view/${listing.id}`">View</NuxtLink>
<!-- <p class="text-red-400 cursor-pointer" @click="emits('deleteClick', listing.id)">Delete</p> -->
<p class="text-red-400 cursor-pointer" @click="handleClick(listing.id)">Delete</p>
</div>
</div>
</template>