Vue fullcalendar，打開。 事件點擊模式

Question

我已經成功地使用Vue FullCalendar獲得了事件單擊，但是我正在嘗試使用該墊腳石，並在單擊事件時使其打開模式。

我現在給我的showModal is not defined

我在哪里錯了？

  <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

這是腳本部分的簡化版本：

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

關鍵更改：

• methods而不是Methods
• this.showModal而不是showModal