SolidScribe/client/src/components/NoteDeleteButtonComponent.vue

<template>
	<span>
		<span class="clickable" @click="confirmDelete()" v-if="click == 0">
			<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">
			<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>