javascript - Vue 全日历，打开 .事件点击时的模态

Question

我已经成功地使用 Vue FullCalendar 获得了事件点击，但我正在尝试使用该踏脚石并让它在单击事件时打开模式。

我现在所拥有的是showModal未定义

我哪里出错了？

  <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;
    },
  },
};

主要变化:

• 方法而不是方法
• this.showModal 而不是 showModal