onaction

Fires when a toolbar item, a section header, or a placement close action is activated. Use it to handle custom toolbar buttons and close, cancel, and delete flows.

Usage

onaction?: (ev: {
  item: any;
  values: Record<string, any>;
  changes: string[];
}) => void;

Field	Type	Description
item	object	The activated toolbar or section item; check item.id. Always a non-null object.
values	Record<string, any>	Current edited values.
changes	string[]	Current changed field keys.

Item ids are application-defined, so a custom toolbar item's id is whatever you set. A handful of ids are emitted by the editor itself.

Predefined item ids

item.id	Emitted by	Notes
"save"	Default primary Save button.	Runs the save flow (validation + onsave) before onaction fires. See onsave.
"cancel"	Default Cancel button.	No built-in behavior - handle the dismissal in your code.
"close"	Default close icon; sidebar dismissal (close icon or click-outside).	No built-in behavior - handle the dismissal in your code.
"toggle-section"	A collapsible section header.	Carries an extra item.key: the section key being expanded, or null when a section is being collapsed. The editor toggles the section internally; the event is forwarded so you can react.

Any other id you see is one you defined on a custom toolbar or section item.

Example

<script setup>
import { ref } from "vue";
import { Editor } from "@svar-ui/vue-editor";

const open = ref(true);

const items = [{ comp: "text", key: "name", label: "Name" }];
const values = { id: 1, name: "John Doe" };

function handleAction({ item }) {
  if (item.id === "close" || item.id === "cancel") open.value = false;
  if (item.id === "delete") remove(values.id);
}
</script>

<template>
  <Editor :items="items" :values="values" :onaction="handleAction" />
</template>

Related articles

• Toolbar