[英]How to access data that has already been validated?
是否可以获取在验证上下文之后验证的数据?
<template>
<v-text-field
:rules="[rules.required]"
@change='doSomething($event)'
></v-text-field>
</template>
<script>
export default {
data () {
return {
rules: {
required: v => !!v || 'Field required.'
}
}
},
methods: {
doSomething (value) {
// does something only if the data is validated
}
}
}
</script>
在这种情况下,我需要处理已经通过字段验证阶段并且有效的数据。
我不知道如何在 vuetify 中执行此操作,但是有什么方法可以获取这些数据而不必通过验证规则中的函数来执行此操作?
您可以收听updated:error
事件,当收到的值为false
时,请拨打您的电话。
<template>
<v-text-field
:rules="[rules.required]"
@update:error='doSomething'
></v-text-field>
并且在脚本中
methods: {
doSomething (error) {
if (error === false) {
// model is validated
}
}
}
要访问字段值,您应该使用v-model
。
正如您在我的Codepen中看到的,在firstname
字段有效之前,提交按钮不起作用。 您还可以删除lazy-validation
,以便在满足验证规则之前无法单击按钮。
<v-form
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="firstname"
:rules="nameRules"
label="Firstname"
required
></v-text-field>
<v-btn
:disabled="!valid"
color="success"
@click="doSomething"
>
Submit
</v-btn>
</v-form>
这是脚本部分:
<script>
export default {
data () {
return {
valid: true,
firstname: '',
nameRules: [v => !!v || 'Name is required']
}
},
methods: {
doSomething () {
if (this.$refs.form.validate()) {
console.log(this.firstname);
}
},
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.