在Vuejs3中如何在CoreUI中单击关闭图标时禁用或关闭模式答案

【问题标题】：In Vuejs3 How to disable or close modal on click of close Icon in CoreUI在Vuejs3中如何在CoreUI中单击关闭图标时禁用或关闭模式
【发布时间】：2021-02-01 08:44:30
【问题描述】：

     *** CORE UI ***

如您所见，我正在尝试使用关闭图标关闭模式。当我在模态页面上写一些数据并且之后没有提交时，我正在关闭该模态数据保持不变。页面无法刷新。重新打开时，Modal 会返回旧数据。

 <CModal :show.sync="modalAdd" :centered="true" >
  <CForm>
  <CRow>
    <CCol>
      <CInput
        label="Name"
        v-model="Name"
      />
    </CCol>
  </CRow>
  <CRow>
    <CCol> Image
      <input
        type="file"
        id="file"
        ref="file"
        @change="onFileUpload()"

      />
    </CCol>
  </CRow>
  <CRow>
    <CCol>
      <CTextarea label="Short_Description"  verticle rows="3" v-model="short_description"/>
    </CCol>
  </CRow>
  <CRow>
    <CCol>
      <CTextarea label="Long_Description"  verticle rows="5" v-model="long_description" required/>
    </CCol>
  </CRow>
  </CForm>
  <template #footer>
    <CButton @click="modalAdd = false" size="sm" color="danger">Cancel</CButton>
    <CButton @click="addTherapyCategory" size="sm" color="success">Save</CButton>
  </template>
</CModal>

【问题讨论】：

标签： vuejs3 core-ui

【解决方案1】：

关闭模态不会重置v-model 值，因此下次显示它时，它们仍将是您关闭模态时的状态。您可以在关闭时调用重置方法：

<CButton @click="reset" size="sm" color="danger">Cancel</CButton>

methods: {
  reset() {
    this.modalAdd = false;
    this.Name = '';
    this.short_description = '';
    this.long_description = '';
  }
}

【讨论】：