Matestack Ui VueJs
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
  • Welcome
  • Migrating to 3.0
  • Back to 2.1 (via Core)
  • Getting started
    • Installation & Update
      • Webpacker Install Steps
      • Importmap Install Steps
      • JSBundling-Rails Install
    • Hello World
  • Built-in Reactivity
    • Emit Client Side Events
      • Onclick Component API
    • Toggle UI States
      • Toggle Component API
    • Call Server Side Actions
      • Action Component API
    • Reactive Forms
      • Overview
      • Form Component API
      • Input Component API
      • Textarea Component API
      • Checkbox Component API
      • Select Component API
      • Radio Component API
      • Nested Forms
    • Partial UI Updates
      • Overview
      • Async Component API
      • Cable Component API
      • Isolated Component API
    • Page Transitions
      • Transition Component API
    • Reactive Collections
      • Overview & API
  • Custom Reactivity
    • Custom Vue.js Components
    • Matestack's Vue.js APIs
    • Third party Vue.js Components
    • Third Party JavaScript
  • Integrations
    • Action Cable
    • Devise
  • Contribute
Powered by GitBook
On this page
  • Parameters
  • emit - required
  • &block - required
  • Examples
  • Emitting an event which triggers an asynchronous rerendering via async
  1. Built-in Reactivity
  2. Emit Client Side Events

Onclick Component API

The onclick component renders an a tag that emits a client side event when the user clicks on it. Other component may react to this event.

The onclick component takes a block in order to define its appearance.

Parameters

emit - required

Takes a string or symbol. An event with this name will be emitted using the Matestack event hub.

You currently cannot pass in an event payload.

&block - required

The passed in block defines the appearance of the onclick component. The UI structure defined in this block will be wrapped with an a tag.

Examples

Emitting an event which triggers an asynchronous rerendering via async

class ExamplePage < Matestack::Ui::Page

  def response
    onclick emit: "abc" do
      button "rerender something"
    end
    async rerender_on: "abc", id: "some-unique-id" do
      plain "Rerender this text when the 'abc' event is emitted #{DateTime.now}"
    end
  end

end
PreviousEmit Client Side EventsNextToggle UI States

Last updated 2 years ago