[Vuejs]-Passing vue function data into modal

by

0👍

I’m not sure I fully understand what you want to do, but I think your goal is to pass parameters from the parent into the modal as you open it. I think the best way to do so is storing the objects in a variable and giving them tho the modal component as properties. The Syntax is this:

In the modal component itself:

props: {
    eventObj: Object,
    asset: Object
}

In the parent component, you need to declare the variables in data (with null or empty values) and set the values in the eventClick-function before you open the modal by switching the flag.

data() {
   return {
      events: [...],
      showModal: false,
      eventObj: {},
      asset: {}
   }
}
methods: {
   eventClick: function(e) {
      this.eventObj = e.event;
      this.asset = e.event.extendedProps.asset;
      this.showModal = true;
   }
}

In the template-part of the parent component:

<modal 
    v-if="showModal" 
    v-bind:eventObj="eventObj" 
    v-bind:asset="asset" 
    @close="showModal = false">
      <!-- your stuff... --!>
</modal>

Leave a comment