问题描述
*** 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 = '';
}
}