vue.js - 如何将 vuelidate 与 vuetify 2 一起用于嵌套数据？获取无效字段

Question

我正在尝试将 vuelidate 与 Vuetify 2 一起使用，但在尝试验证嵌套对象值时遇到了麻烦。

此代码工作正常：

    <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也会始终返回。如何使验证适用于任何其他嵌套数据值？trueuser.no_nomeuser.no_nome

Answer 1

您必须在数据和验证之间使用相同的数据形状。请参阅数据嵌套。

所以你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()"/>

例子