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

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

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

解决方法

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

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

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