Matestack's Vue.js APIs

Event Hub

Matestack offers an event hub, which can be used to communicate between components.

Emitting events

app/matestack/components/some_component.js

import MatestackUiVueJs from "matestack-ui-vuejs";

const someComponent = {
  mixins: [MatestackUiVueJs.componentMixin],
  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
  data() {
    return {}
  },
  mounted(){
    MatestackUiVueJs.eventHub.$emit("some-event", { some: "optional data" })
  }
}
export default someComponent

Use MatestackUiVueJs.eventHub.$emit(EVENT_NAME, OPTIONAL PAYLOAD)

Receiving events

app/matestack/components/some_component.js

import MatestackUiVueJs from "matestack-ui-vuejs";

const someComponent =  {
  mixins: [MatestackUiVueJs.componentMixin],
  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
  data() {
    return {}
  },
  methods: {
    reactToEvent(payload){
      console.log(payload)
    }
  },
  mounted(){
    MatestackUiVueJs.eventHub.$on("some-event", this.reactToEvent)
  },
  beforeUnmount(){
    MatestackUiVueJs.eventHub.$off("some-event", this.reactToEvent)
  }
}
export default someComponent

Make sure to cancel the event listener within the beforeUnmount hook!

General Vue.js API

As we're pretty much implementing pure Vue.js components, you can refer to the Vue.js guides in order to learn more about Vue.js component usage.

Please note the following differences from the original Vue.js API:

component $refs

• use this.getRefs() instead of this.$refs

• use matestack_ui_vuejs_ref() when applying refs to your componen template:

def response
    # ...
    div ref: "some-ref" # <-- not picked up by this.getRefs()
    # ...
    div "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref('some-ref')
end

component $el

• use this.getElement() instead of this.$el in order to get the root element defined in your response method

component template/root element

• use this.getTemplateElement() in order to get the template element wrapping the root element defined in your response method