vue2 对话框关闭清空表单输入框数据
时间: 2023-09-09 10:14:33 浏览: 48
在 Vue2 中,你可以在对话框关闭时,手动清空表单内部的数据。可以使用 `data` 或 `computed` 来创建数据对象,并在对话框关闭时将其重置为初始值。同时,你可以使用 `ref` 或 `v-model` 来绑定表单的值。以下是一个示例:
```vue
<template>
<div>
<button @click="showDialog = true">打开对话框</button>
<dialog v-if="showDialog">
<form ref="form">
<input v-model="formData.name" type="text">
<input v-model="formData.email" type="email">
<button @click="closeDialog">关闭对话框</button>
</form>
</dialog>
</div>
</template>
<script>
export default {
data() {
return {
showDialog: false,
formData: {
name: '',
email: ''
}
}
},
methods: {
closeDialog() {
// 关闭对话框时重置表单数据
this.formData.name = ''
this.formData.email = ''
this.$refs.form.reset()
this.showDialog = false
}
}
}
</script>
```
以上代码中,我们使用 `data` 来创建了一个数据对象 `formData`,表示表单的数据。在表单中,我们使用 `v-model` 来绑定表单元素的值。在 `closeDialog` 方法中,我们将表单数据重置为初始值,并使用 `reset` 方法来清空表单元素的值。这样,每次打开对话框时,表单数据都是空的,可以避免出现数据重复或污染的问题。