list-postcards4.vue

list-postcards4.vue

<template>
         <!-- other code -->
           <ul>
		<li v-for="postcard in postcards">
               <span v-if="postcard.from != null">
                   From {{ postcard.from.name }} to {{ postcard.to.name }}.
               </span>
               <span v-else>
                   From *Address Missing* to {{ postcard.to.name }}.
               </span>

              <span
                v-if="canCancel(postcard.send_date)"
                @click="cancel(postcard.id)"
                class="cancel">Cancel
             </span>
		</li>
           </ul>
        <!-- other code -->
</template>
<style>
.cancel {
   cursor: pointer;
   border: 1px solid red;
   color: red;
   border-radius: 10px;
   padding: 6px;
}
</style>