时间戳

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

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

标签： vuejs3core-ui

解决方案

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

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

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

推荐阅读