Vue fullcalendar, open . modal on event click

Question

I have successfully gotten event click working with Vue FullCalendar, but I'm trying to use that stepping stone and get it to open a modal when the event is clicked.

What I have now is giving me showModal is not defined

Where am I going wrong here?

  <FullCalendar 
    @eventClick="eventClick"
  />


  <script type="text/x-template" id="modal-template">
    <transition name="modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">

            <div class="modal-header">
              <slot name="header">
                default header
              </slot>
            </div>

            <div class="modal-body">
              <slot name="body">
                default body
              </slot>
            </div>

            <div class="modal-footer">
              <slot name="footer">
                default footer
                <button class="modal-default-button" @click="$emit('close')">
                  OK
                </button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>

  <modal v-if="showModal" @close="showModal = false">
    <!--
      you can use custom content here to overwrite
      default content
    -->
    <h3 slot="header">custom header</h3>
  </modal>




  <script>
  Vue.component('modal', {
    template: '#modal-template'
  })

  export default {
      data () {
          return {
              events: [

              ],
              showModal: false
          }
      },
    Methods:{
        eventClick: function(e) {
        var eventObj = e.event;
        showModal = true;

        //alert('Clicked ' + eventObj.title);
        let element = this.$refs.modal.$el;
        $(element).modal('show');
   } 

      },

  </script>

Answer 1

Here's a simplified version of the script section:

export default {
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    eventClick() {
      this.showModal = true;
    },
  },
};

Key changes:

• methods instead of Methods
• this.showModal instead of showModal