重置 Vuetify 表单验证
Reset Vuetify form validation
我在 v-dialog 中重置 vuetify 验证时遇到问题。
这个codepen是我手头的简化版。
https://codepen.io/yuukive/pen/BVqpEZ
使用上面的代码,如果我这样做
(打开对话框 --> 按保存按钮 --> (验证失败) --> 按关闭按钮 --> 再次打开对话框),
当我再次打开对话框时它已经被验证了...
是否可以在用户第二次打开之前重置验证?
new Vue({
el: '#app',
data: () => ({
dialog: false,
emailRules: [v => !!v || 'Name is required']
}),
methods: {
onSave() {
if (!this.$refs.form.validate()) return
dialog = false
}
}
})
<div id="app">
<v-app id="inspire">
<v-layout row justify-center>
<v-dialog v-model="dialog" persistent max-width="500px">
<v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
<v-card>
<v-card-title>
<span class="headline">Email</span>
</v-card-title>
<v-form ref="form">
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12>
<v-text-field label="Email" required :rules="emailRules"></v-text-field>
</v-flex>
</v-layout>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click.native="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" flat @click.native="onSave">Save</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</v-layout>
</v-app>
</div>
Example 来自文档使用:
this.$refs.form.reset()
请注意,虽然 reset()
清除验证,但它也会清除输入。
您可以关注 this issue 以查看有关此的进一步更新。
因此您或许可以查看对话框值并重置表单:
watch: {
dialog() {
this.$refs.form.reset()
}
}
resetValidation()
只会清除验证错误,reset()
也会清除输入字段。
this.$refs.form.reset()
可能适用于 JavaScript
,但 TypeScript
的编译器会抱怨打字。即使在 serve
期间您只能在终端中看到错误而不会破坏应用程序,但当您尝试 build
应用程序时它实际上会中断。
创建一个新变量并赋值给它 any
类型就可以了,下面是一个例子:
const refForm: any = this.$refs.form;
refForm.reset();
我在 v-dialog 中重置 vuetify 验证时遇到问题。
这个codepen是我手头的简化版。
https://codepen.io/yuukive/pen/BVqpEZ
使用上面的代码,如果我这样做
(打开对话框 --> 按保存按钮 --> (验证失败) --> 按关闭按钮 --> 再次打开对话框),
当我再次打开对话框时它已经被验证了...
是否可以在用户第二次打开之前重置验证?
new Vue({
el: '#app',
data: () => ({
dialog: false,
emailRules: [v => !!v || 'Name is required']
}),
methods: {
onSave() {
if (!this.$refs.form.validate()) return
dialog = false
}
}
})
<div id="app">
<v-app id="inspire">
<v-layout row justify-center>
<v-dialog v-model="dialog" persistent max-width="500px">
<v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
<v-card>
<v-card-title>
<span class="headline">Email</span>
</v-card-title>
<v-form ref="form">
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12>
<v-text-field label="Email" required :rules="emailRules"></v-text-field>
</v-flex>
</v-layout>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click.native="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" flat @click.native="onSave">Save</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</v-layout>
</v-app>
</div>
Example 来自文档使用:
this.$refs.form.reset()
请注意,虽然 reset()
清除验证,但它也会清除输入。
您可以关注 this issue 以查看有关此的进一步更新。
因此您或许可以查看对话框值并重置表单:
watch: {
dialog() {
this.$refs.form.reset()
}
}
resetValidation()
只会清除验证错误,reset()
也会清除输入字段。
this.$refs.form.reset()
可能适用于 JavaScript
,但 TypeScript
的编译器会抱怨打字。即使在 serve
期间您只能在终端中看到错误而不会破坏应用程序,但当您尝试 build
应用程序时它实际上会中断。
创建一个新变量并赋值给它 any
类型就可以了,下面是一个例子:
const refForm: any = this.$refs.form;
refForm.reset();