当前位置: 代码迷 >> 综合 >> uniapp-表单提交后请清空表单
  详细解决方案

uniapp-表单提交后请清空表单

热度:31   发布时间:2023-11-19 11:52:49.0

第一种  通过v-model=""的动态清空

<form @submit="formSubmit" ><view><input type="text" value="" v-model="test" name="test" /><button form-type="submit">Submit</button></view>
</form>
formSubmit(e) {console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))this.test = '';
}

第二种  通过reset按钮来动态清除,而不是直接点击来实现, H5端的

<form @submit="formSubmit" @reset="formReset"><view><button form-type="submit">Submit</button><button form-type="reset" ref="resrtBtn" style="display:none;">Reset</button></view>
</form>
formSubmit(e) {console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))this.$refs.resrtBtn.$dispatch('Form', 'uni-form-reset', {type: 'reset'})
}

第三种  就是通过手动的reset按钮来清除

<form @submit="formSubmit" @reset="formReset"><view><button form-type="submit">Submit</button><button form-type="reset" ref="resrtBtn" >Reset</button></view>
</form>
formReset(e) {console.log('form发生了reset事件)}