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

Posted 2023-02-23

【中文标题】为啥我不能在不更改或保存更改的情况下关闭此模式？

【英文标题】：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>

【参考方案1】：

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

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