> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/v1/usage/javascript-tips/calling-named-actions-from-html-vue-events.md).

# Calling Named Actions from HTML Vue Events

There are many times you want to trigger an action script from an event within a block of HTML code.

Vue makes it easy to attach events onto HTML elements.

#### You can do direct mutations to the `model` :

```markup
<button @click="model.count = model.count + 1" >Do Something</button>
// increase the model.count by 1
```

#### You can run action scripts on events too:

```markup
<button @click="namedAction('handleButton')" >Do Something</button>
// runs the namedAction called 'handleButton'
```

### Advanced:

Some Vue components expect a pure function to be passed into the event handler key. For this situation, you cannot use the `namedAction` function directly, but instead just wrap it as follows:

```markup
<some-component @someEvent="function(){ namedAction('handleEvents',{arguments:arguments})}" ></some-component>
// passes the arguments that the component passed, into all the actions.
// action.options.arguments will contain an array of the following
// pageSchema, model, action, app, arguments

//ES6 variant ( modern browsers only )
<some-component @someEvent="(something)=>namedAction('handleEvents',{something:something})" ></some-component>
// action.options.something will contain the parameter 'something' object
```