写一段代码 vue3表单提交完后重制表单
时间: 2023-03-14 20:50:45 浏览: 70
vue form 表单提交后刷新页面的方法
在 Vue 3 中,可以使用 `ref` 函数来创建一个响应式的变量,然后在表单提交成功后,将表单数据重置为初始值。
下面是示例代码:
```html
<template>
<form @submit.prevent="submitForm">
<label>
Name:
<input type="text" v-model="name" />
</label>
<button type="submit">Submit</button>
</form>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const name = ref('');
function submitForm() {
// 在这里提交表单,可以使用 Axios 或 Fetch 等库
// 表单提交成功后,重置表单数据
name.value = '';
}
return {
name,
submitForm,
};
},
};
</script>
```
在上面的代码中,我们使用了 `ref` 函数创建了一个名为 `name` 的响应式变量。当用户在表单中输入内容时,`name` 的值会随之改变。
在 `submitForm` 函数中,我们可以使用 Axios 或 Fetch 等库来提交表单。在表单提交成功后,我们将 `name` 的值重置为一个空字符串,以实现重置表单的效果。
阅读全文