<template> <span> <span class="clickable" @click="confirmDelete()" v-if="click == 0" data-tooltip="Delete" data-inverted="" data-position="top right"> <i class="grey trash alternate icon"></i> </span> <span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="left center" data-inverted=""> <i class="red trash alternate icon"></i> </span> </span> </template> <script> import axios from 'axios' export default { name: 'NoteTitleDisplayCard', props: [ 'noteId', 'displayText' ], data () { return { click: 0, } }, methods:{ confirmDelete(){ this.click++ }, actuallyDelete(){ axios.post('/api/note/delete', {'noteId':this.noteId}).then(response => { if(response.data == true){ this.$bus.$emit('note_deleted') } }) }, reset(){ this.click = 0 } } } </script>