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

【问题标题】：Why I can`t close this modal without changes or save changes?为什么我不能在不更改或保存更改的情况下关闭此模式？
【发布时间】：2022-01-20 15:23:34
【问题描述】：

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

<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>

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

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

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

【讨论】：