如何在 vee-validate 中显示相关错误消息

Question

如何显示与 vee-validate 中的错误相关的错误消息。我有一个数字输入，我验证它是否为必填和数字，如下所示：

<ValidationObserver :name="'age'">
        <div class="flex flex-col items-center">
          <h3 class="nunito text-2xl">Wpisz swój rok urodzenia</h3>

          <form class="" @submit.prevent="handleSubmit(onSubmit('alko'))">
            <label for="age" class="hidden">Wpisz swój rok urodzenia</label>
            <ValidationProvider
              v-slot="{ errors }"
              mode="eager"
              rules="numeric|required"
              :bails="false"
            >
              <input
                id="age"
                type="number"
                placeholder="1992"
                v-model="ageInput"
                name="age"
                data-vv-scope="alko"
                class="k-border p-4 text-center h-20 w-44 text-xl nunito my-6"
              />
              <div class="text-red-500 text-center nunito text-xs">
                {{ errors[0] }}
              </div>
            </ValidationProvider>
          </form>
        </div>
      </ValidationObserver>

<script>
import { ValidationProvider, ValidationObserver, extend } from "vee-validate";
import { numeric, required } from "vee-validate/dist/rules";
export default {
  name: "AgeVerificationXs",
  components: {
    ValidationProvider,
    ValidationObserver,
  },
  data() {
    return {
      showAlko: true,
      ageInput: "",
    };
  },
  methods: {
    onSubmit(data) {
      console.log(data);
    },
  },
  created() {
    extend("required", {
      ...required,
      message: "To pole jest wymagane",
    });
    extend("numeric", {
      ...numeric,
      message: "To pole może zawierać tylko cyfry",
    });
  },
};
</script>

问题是，当我在 Firefox 上输入非数字字符时（在 chrome 上，它们在字段类型数字中默认被禁用）时，我收到的消息是字段是必需的，问题是该字段已填充，并且应该应用的规则是“数字”我显示错误[0]（根据文档和我找到的每个示例），但我需要显示与错误。我怎样才能做到这一点？感谢任何帮助。 谢谢。

Answer 1

我相信问题在于您在created()生命周期挂钩中有“必需”和“数字”规则。您需要将它们移出导出默认 {} 和created() 生命周期挂钩，并移到导入它们的位置下方，如下所示：

import { numeric, required } from "vee-validate/dist/rules";

extend("required", {
  ...required,
  message: "To pole jest wymagane",
});
extend("numeric", {
  ...numeric,
  message: "To pole może zawierać tylko cyfry",
});