Question

是否可以在验证上下文之后获取已验证的数据？

<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中做到这一点，但是有什么方法可以不必通过验证规则中的函数来获取此数据吗？

Answer 1

您可以监听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。

Answer 2

正如您在我的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>

如何访问已验证的数据？

2 个答案: