为什么我不能在没有更改或保存更改的情况下关闭此模式？

Question

我将一个任务作为 props 传递，并在组件中创建一个变量来存储初始值。当我单击“关闭”按钮并将值输入到文本区域时，我不需要保存更改，但如果我单击“保存”按钮，则保存它们。这怎么办，不然对我没用

<template lang="pug">
    .modal-task(:style="{display: showDetailsModal}")
        .modal-task-details
            .task
                .name(v-show="show")
                    |Name: {{task.name}}
                .text(v-show="!show")
                    textarea(v-model='updatedTask.name')
                .status
                    |Status: {{task.status}}
                .deadline
                    |Deadline: {{task.time}}
                .description(v-show="show")
                  |description: {{task.description1}}
                .text(v-show="!show" @change="handleChange")
                    textarea(v-model='updatedTask.description1')
            button(class='add-task' v-on:click="show=!show" v-show="show") Edit
            button(class='add-task' v-on:click="show=!show" v-show="!show" @click="closeForm()") Close
            button(class='add-task' v-show="showSaveButton" @click="saveTask(task)") Save
    </template>
    
    <script lang="ts">
    import { defineComponent } from 'vue'
    import { emitter } from '../main'
    
    export default defineComponent({
      name: 'task-details-modal',
      props: ['showDetailsModal', 'task'],
      data () {
        return {
          show: true,
          showSaveButton: true,
          updatedTask: {}
        }
      },
      methods: {
        closeForm () {
          emitter.emit('close')
          console.log(this.updatedTask)
        },
        saveTask () {
          this.updatedTask = this.task
          emitter.emit('close')
        },
        handleChange () {
          this.showSaveButton = true
        }
      },
      created () {
        this.updatedTask = JSON.parse(JSON.stringify(this.task))
      }
    })
    </script>

Answer 1

要保存数据，您需要发出另一个事件，该事件将调用 saveMethod 函数，然后在操作成功的情况下从保存方法关闭对话框。

目前，您在保存和关闭操作上发出关闭事件，您需要将其分开。

为什么我不能在没有更改或保存更改的情况下关闭此模式？

Why I can`t close this modal without changes or save changes?

vue.js

vue-component