v-click
Call server-side methods with a clean, declarative syntax.
Basic Usage
<!-- Call a method -->
<button v-click:increment>Add</button>
<!-- With a single parameter -->
<button v-click:delete="{{ item.id }}">Delete</button>
<!-- With multiple parameters -->
<button v-click:move="[{{ item.id }}, 'up']">Move Up</button>Modifiers
| Modifier | Example | Description |
|---|---|---|
| .prevent | v-click:submit.prevent |
Calls event.preventDefault() |
| .stop | v-click:toggle.stop |
Calls event.stopPropagation() |
| .self | v-click:close.self |
Only triggers if the event target is the element itself |
| .once | v-click:init.once |
Only triggers once |
| .outside | v-click:close.outside |
Triggers when clicking outside the element |
| .debounce | v-click:search.debounce.300ms |
Debounces the action (default: 250ms) |
| .throttle | v-click:load.throttle.500ms |
Throttles the action (default: 250ms) |
| .capture | v-click:handle.capture |
Use capture mode for event listener |
| .passive | v-click:scroll.passive |
Use passive mode (improves scroll performance) |
Combining Modifiers
<!-- Prevent default, stop propagation, and debounce -->
<form>
<button v-click:submit.prevent.stop.debounce.500ms>
Submit
</button>
</form>
<!-- Close dropdown when clicking outside, only once -->
<div v-click:close.outside.once>
Dropdown content
</div>v-click vs livue.call()
Both achieve the same result. Use whichever you prefer.
v-click (recommended)
<button v-click:save>Save</button>
@click + livue.call()
<button @click="livue.call('save')">Save</button>