vue 按钮相关事件未触发

Question

在：

https://codesandbox.io/s/upbeat-hodgkin-qjt61?file=/src/components/EditCategory.vue

长按类别后模态显示如预期：

但是单击 OK 不会触发 close 事件：

<template>
  <div>
    <p v-longclick="() => longClicked()" @click="longClicked()">
      {{ taskItemLocal["name"] }}
    </p>
    <div v-if="this.showModal" @close="closeModal()">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-container">
              <div class="modal-header">
                <slot name="header"> Edit Category </slot>
              </div>

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

              <div class="modal-body">
                <slot name="delete"> Delete Category </slot>
              </div>

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

closeModal() 没有被调用； “直接”更改 showModal 也失败了。

Answer 1

你可以像这样制作你的按钮。你把它弄得比它应该的更复杂

<button class="modal-default-button" @click="showModal = false">

另外，官方文档中有这个例子 here.

Answer 2

您已向父级发送事件，但在父级组件中您尚未对“关闭”事件执行任何操作。在这里，在 GenericItem.vue 中，我使用 @close="closeBox($event)" 创建了事件监听器。这里会触发closeBox

方法

GenericItem.vue

模板更改

 <edit-category
  v-if="editCategoryStatus"
  :taskItem="taskItemLocal"
  @close="closeBox($event)"
/>

添加一个closeBox方法

closeBox() {
  this.editCategoryStatus = !this.editCategoryStatus;
},

在数据上添加 editCategoryStatus

 data() {
return {
  editCategoryStatus: true,
  taskItemLocal: {
    type: Object,
    default: {},
  },
};

Answer 3

如果您想监听发出该事件的组件中的事件，请使用实例 $on 方法：

  mounted() {
    this.$on("close", () => {
      this.closeModal();
    });
  }

模板事件处理程序@close="closeModal()" 用于侦听来自父级的事件。它在子组件内没有影响。

工作代码和框：https://codesandbox.io/s/loving-kirch-vrhwn?file=/src/components/EditCategory.vue .

vue 按钮相关事件未触发

vue button related event not fired

javascript

modal-dialog

vue.js

vue-component

vuejs2