VeeValidate 在使用 ValidationProvider 时无法查看错误

问题描述

我有以下代码的子组件。

<template>
  <div>
    <ValidationProvider rules="required">
      <template slot-scope="{ errors }">
        <input type="text" />
        {{ errors[0] }}
      </template>
    </ValidationProvider>
  </div>
</template>

<script>
export default {
  name: "CompA",};
</script>

从父组件调用它

<template>
  <div>
    <CompA v-model="value" />
  </div>
</template>

<script>
import CompA from "./components/CompA";

export default {
  name: "app",components: {
    CompA,},data: () => ({
    value: "",}),};
</script>

它显示输入框但问题，它不验证输入字段并返回错误消息。

尝试将 ValidationProvider 直接放在父组件中，并且可以正常工作。

我做了一个可重复使用的组件。请帮帮我，我卡住了

解决方法

我有几乎相同的组件，它也由 VeeValidate 验证。在您的 input 元素中，您没有设置 value 属性。您还应该在 input 元素上添加事件侦听器。有我的可重用输入组件的代码：

<template>
  <validation-provider
    v-slot="{ errors }"
    :rules="rules"
    :name="name"
    class="v-input__wrapper"
  >
    <label
      :for="name"
      class="v-input__label"
    >
      {{ name }}
    </label>
    <input
      :id="name"
      :value="model"
      :type="type"
      class="v-input__input"
      :class="{ 'v-input__input--error' : errors.length}"
      @input="$emit('update:model',$event.target.value)"
    />
    <transition name="error">
      <small
        v-if="errors.length"
        class="v-input__error-message"
      >
        {{ errors[0] }}
      </small>
    </transition>
  </validation-provider>
</template>
<script lang="ts">
import { Prop,Component,Vue } from 'nuxt-property-decorator'
import { ValidationProvider } from 'vee-validate'
@Component({
  components: {
    ValidationProvider
  }
})
export default class VInput extends Vue {
  @Prop({ required: true,type: String }) rules!: string
  @Prop({ required: true,type: String }) name!: string
  @Prop({ required: true,type: String }) type!: string
  @Prop({ required: false,type: Boolean,default: false }) disabled!: boolean
  @Prop({ required: true }) model!: string
}
</script>

它是用 TypeScript 编写的，但我认为理解它不会有任何问题。无论如何，欢迎提出任何问题。注意 input's value 属性和 @input。 在父组件中，我像这样使用 VInput：

  <template>
    <validation-observer
      v-slot="{ handleSubmit }"
      tag="div"
      class="auth-form__wrapper"
    >
      <form
        class="auth-form"
        @submit.prevent="handleSubmit(submitHandler)"
      >
        <v-input
          v-for="input in form"
          :key="`${input.name}-${input.rules}`"
          :rules="input.rules"
          :name="input.name"
          :type="input.type"
          :model.sync="form[input.type].value"
        />
        <div class="auth-form--buttons">
          <button
            class="auth-form--submit"
            type="submit"
            @click="submitType = 'login'"
          >
            Login
          </button>
          <button
            class="auth-form--submit"
            type="submit"
            @click="submitType = 'signUp'"
          >
            Sign up
          </button>
        </div>
        <transition name="error">
          <span
            v-if="message"
            class="auth-form--message"
            :class="{ error: messageStyle === 'error',info: messageStyle === 'info' }"
          >
            {{ message }}
          </span>
        </transition>
        <v-loader v-if="isAuthLoading" />
      </form>
    </validation-observer>
<template>
<script>
...

  private form: AuthForm = {
    email: {
      value: '',rules: 'required',name: 'Email',type: 'email'
    },password: {
      value: '',rules: `required|min:${PASSWORD_MIN_LENGTH}|password`,name: 'Password',type: 'password'
    }
  }
</script>