Methods

methods gives an Ornata component a place to define reusable internal actions.

Why methods matter

Methods help keep a component readable and organized. Instead of putting the same imperative logic inside multiple render callbacks or event handlers, you define the action once and call it where needed.

A simple example

To define a method, add a function to the methods option and put the component action you want to reuse inside it.

JavaScript

methods: {
    getPanelLabel() {
        return this.state.open ? "Collapse panel" : "Expand panel";
    },
}

TypeScript

interface DisclosureMethods {
    getPanelLabel: () => string
};

methods: {
    getPanelLabel() {
        return this.state.open ? "Collapse panel" : "Expand panel";
    },
}

That method can then be called from other parts of the component including render, watchers, lifecycle, and other methods.

JavaScript

render: {
    button() {
        return {
            text: this.methods.getPanelLabel(),
        };
    },
}

TypeScript

interface DisclosureMethods {
    getPanelLabel: () => string
};

interface DisclosureElements {
    button: HTMLButtonElement
};

render: {
    button() {
        return {
            text: this.methods.getPanelLabel(),
        };
    },
}

Methods as event handlers

One of the most common uses for methods is handling UI events. Instead of defining the event logic inline in render, point the event directly at a named method.

That keeps the render callback focused on wiring and makes the event behavior reusable and easy to name.

JavaScript

methods: {
    handleClick() {
        this.state.open = !this.state.open;
    },
},

render: {
    button() {
        return {
            events: {
                click: this.methods.handleClick,
            },
        };
    },
}

TypeScript

interface DisclosureMethods {
    handleClick: (event: MouseEvent) => void
};

interface DisclosureElements {
    button: HTMLButtonElement
};

methods: {
    handleClick() {
        this.state.open = !this.state.open;
    },
},

render: {
    button() {
        return {
            events: {
                click: this.methods.handleClick,
            },
        };
    },
}

What methods can access

Methods are bound to the internal component instance.

That means they can access anything that is attached to the internal object including:

• this.state
• this.elements
• this.methods
• this.data
• this.computed

This makes them a natural place for action-oriented component logic.

A good mental model

If state is what the component knows, methods are what the component does.