在Vue.js听取基金会活动？

Question

I'm building an app in Vue.js with the general structure of:

<app>
    <filters-component></filters-component>
    <div class="off-canvas-content">
        <nav-component></nav-component>
        <div class="row card-grid">
            <card-component v-for="item in items">
                <modal-component v-if="launchModal === true"></modal-component>
            </card-component>
        </div>
    </div>
</app>

This allow me to render the modal on the DOM only if a data element of launchModal is set to true (after clicking the button to launch the modal). This works great, but I need to do the reverse when it's closed.

According to Foundation's documentation, the Reveal (modal) component should emit an event called closed.zf.reveal when it's closed.

How do I listen for this event on the parent element (card-component) and then change launchModal to false, when it's called?

Thanks!

Answer 1

Essentially this will likely boil down to, in your modal-component (add these to the script in Modal.vue)

methods:{
    onModalClosed(){
        this.$emit("modal-closed")
    }
},
mounted(){
    this.$el.addEventListener('closed.zf.reveal', this.onModalClosed)
},
beforeDestroy(){
    this.$el.removeEventListener('closed.zf.reve‌​al', this.onModalClosed)
}

Or something to that effect, depending on what element emits the event. If some other element emits the closed.zf.reveal event, then you could add a ref="modal" to it and then use this.$refs.modal.addEventListener and this.$refs.modal.removeEventListener .

Then you could just

<modal-component v-if="launchModal === true"
                 @modal-closed="launchModal = false">
</modal-component>

Edit

So the issue with listening to the event is that Foundation is using jQuery to fire the event. That means that you cannot listen for it using native methods ( addEventListener ), you have to listen to it with jQuery. So the modified code from above would be this:

methods:{
    onModalClosed(){
        this.$emit("modal-closed")
    }
},
mounted(){
    $(this.$el).on('closed.zf.reveal', this.onModalClosed)
},
beforeDestroy(){
    $(this.$el).off('closed.zf.reve‌​al', this.onModalClosed)
}

And this does, in fact, catch the event. The problem is that Foundation, for whatever reason, moves the modal outside of the Vue and appends it to the bottom of the document when the modal is initialized. That causes Vue to throw an error when launchModal is set to false because the modal is no longer inside the Vue, and Vue complains when it tries to remove it from the DOM.

That being the case, I suggest you use your v-if inside the modal for the things that are rendering very slowly . That will result in a component like this.

Vue.component("modal", {
  props:["show"],
  template: "#modal-template",
  watch:{
    show(newVal){
      if (newVal)
        $(this.$el).foundation("open")
    }
  },
  methods:{
    onModalClosed(){
      this.$emit("modal-closed")
    }
  },
  mounted() {
    new Foundation.Reveal($(this.$el))
    $(this.$el).on("closed.zf.reveal", this.onModalClosed);
  },
  beforeDestroy() {
    $(this.$el).off("closed.zf.reveal", this.onModalClosed);
  }
});

And the template is

<template id="modal-template">
  <div class="reveal" data-reveal>
    <div v-if="show">
      Stuff that is expensive to render
    </div>
    <button class="close-button" data-close aria-label="Close modal" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</template>

And here is the working example .