表单需加上ref属性
字段需加上prop属性

<template>
<div class="main">
<el-form ref="resetFormData" :model="formInline">
<el-form-item label="姓名" prop="customerName">
<el-input
v-model="formInline.customerName"
placeholder="请输入姓名"
></el-input>
</el-form-item>
<el-button type="warning" @click="resetForm">重置</el-button>
</el-form>
</div>
</template>
<script>
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
setup() {
const resetFormData = ref(null);
const formInline = reactive({});
const resetForm = () => {
resetFormData.value.resetFields();
};
return {
resetForm,
resetFormData,
formInline,
};
},
});
</script>
Vue.js表单重置与字段验证
这篇博客介绍了在Vue.js中如何使用ref和prop属性来管理表单,包括如何为表单字段添加prop属性以实现数据绑定,以及如何通过ref属性引用表单并调用resetFields方法进行重置操作,确保用户输入的数据有效性和页面交互的顺畅性。
8460





