Vue dialog submit method not executed

Kirby 4 Solved ✔️
1

Hi,
I’ve managed to create a custom button plugin. I execute a method (calling a php function) when clicking it. This works well as long as I do not use a dialog for confirmation.
Whenever I use the dialog submit event, the submit method is not triggered.

it’s this piece of code:

			submit: () => {
				alert("Dialog submitted");
				this.confirmCreation();
			}

Any ideas anybody.

Thanks in avance.

See my .vue file below:

<template>
	<div>
		<k-button variant="filled" icon="circle" @click="onClick">{{ btext }}</k-button>
	</div>
</template>

<script>
export default {
	props: {
		btext: String,
		pageId: String
	},
	methods: {
		onClick() {
			// trigger the function on the buttonclick works, this is the line below
			// this.confirmCreation();
			
			this.$panel.dialog.open({
				component: 'k-text-dialog',
				props: {
					text: 'Lessen aanmaken?',
				},
				/* this is not executed on submit */
				submit: () => {
					alert("Dialog submitted");
					this.confirmCreation();
				}
			});
		},
		confirmCreation() {
			alert("I'm in confirmCreation");
			let currentPageId = this.pageId;
			this.$api.get('flexbutton-click', { pageId: currentPageId })
				.then((response) => {
					if (response.status === 'success') {
						console.log(response.message);
						window.location.reload();
					} else {
						console.error('Error:', response.message);
					}
				})
				.catch((error) => {
					console.error('Error:', error);
				});
		}
	}
};
</script>

<style>
/* Your styles (if any) */
</style>
2

All the dialogs in the source code look like this:

	this.$panel.dialog.open({
				component: "k-toolbar-" + dialog + "-dialog",
				props: {
					value: this.parseSelection()
				},
				on: {
					cancel: restoreSelection,
					submit: (text) => {
						this.$panel.dialog.close();
						restoreSelection(() => this.insert(text));
					}
				}
			});
3

Sonja, first thanks for this quick reply,
Second, I’ve adjusted my code accordingly and yes… now it works.
Below the updated version (with a delete options added).

<template>
	<div>
		<k-button variant="filled" icon="circle" @click="onClick">{{ btext }}</k-button>
	</div>
</template>

<script>
export default {
	props: {
		btext: String,
		pageId: String,
		actiontype: String
	},
	methods: {
		onClick() {
			let dialogText = this.actiontype === 'create' ? 'Lessen aanmaken?' : 'Lessen verwijderen?';
			let confirmAction = this.actiontype === 'create' ? this.confirmCreation : this.confirmDeletion;

			this.$panel.dialog.open({
				component: 'k-text-dialog',
				props: {
					text: dialogText,
				},
				on: {
					cancel: () => {
						console.log('Dialog canceled');
					},
					submit: () => {
						this.$panel.dialog.close();
						confirmAction();
					}
				}
			});
		},
		confirmCreation() {
			let currentPageId = this.pageId;
			//	alert("currentPageId : "+currentPageId);

			this.$api.get('flexbutton-click', { pageId: currentPageId })
				.then((response) => {
					if (response.status === 'success') {
						console.log(response.message);
						window.location.reload();
					} else {
						console.error('Error:', response.message);
					}
				})
				.catch((error) => {
					console.error('Error:', error);
				});
		},
		confirmDeletion() {
			let currentPageId = this.pageId;
			// alert("confirmDeletion");
			this.$api.get('flexbutton-delete', { pageId: currentPageId })
				.then((response) => {
					if (response.status === 'success') {
						console.log(response.message);
						window.location.reload();
					} else {
						console.error('Error:', response.message);
					}
				})
				.catch((error) => {
					console.error('Error:', error);
				});
		}
	}
};
</script>

<style>
/* Your styles (if any) */
</style>