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
Last modified 11mo ago