如何将vuelidate与vuetify 2一起用于嵌套数据?获取无效字段

我正在尝试在vuetify 2中使用vuelidate,但是在尝试验证嵌套对象值时遇到麻烦。

此代码可以正常工作:

    <template>
        <v-text-field
        v-model="no_nome"
        :error-messages="nameErrors"
        label="Nome"
        @input="$v.no_nome.$touch()"
        @blur="$v.no_nome.$touch()"
        >
        </v-text-field>
    </template>

    <script>

     import { required } from 'vuelidate/lib/validators'
     export default {

        data() {
            return {
                no_nome:'',}
        },validations: {
            no_nome: {
                required
            },},computed: {
            nameErrors () {
                const errors = []
                if (!this.$v.no_nome.$dirty)
                    return errors
                !this.$v.no_nome.required && errors.push('Name is required.')
                return errors
            },}
     }
   </scrip>

但是,如果我将no_nome数据更改为:

        data() {
            return {
                user : {
                   no_nome:'',}
            }
        },

        <v-text-field
        v-model="user.no_nome"
        :error-messages="nameErrors"
        label="Nome"
        @input="$v.no_nome.$touch()"
        @blur="$v.no_nome.$touch()"
        >
        </v-text-field>

运行$vm0.$v.no_nome.$touch()后,即使$vm0.$v.no_nome.$invalid不为空,true也将始终返回user.no_nome。如何使验证适用于user.no_nome和任何其他嵌套数据值?

linshumian999 回答:如何将vuelidate与vuetify 2一起用于嵌套数据?获取无效字段

您必须在数据和验证之间使用相同的数据形状。参见Data Nesting

因此您的validations必须为:

validations: {
  user: {
    no_nome: {
      required
    }
  }
}

computed: {
  nameErrors () {
    const errors = []
    if (!this.$v.user.no_nome.$dirty)
      return errors
    !this.$v.user.no_nome.required && errors.push('Name is required.')
    return errors
  }
}

<v-text-field
  v-model="user.no_nome"
  :error-messages="nameErrors"
  @input="$v.user.no_nome.$touch()"
  @blur="$v.user.no_nome.$touch()"/>

Example

本文链接:https://www.f2er.com/2743071.html

大家都在问