$validator undefined vee-validate NuxtJS答案

【问题标题】：$validator undefined vee-validate NuxtJS$validator undefined vee-validate NuxtJS
【发布时间】：2020-06-14 07:17:51
【问题描述】：

我已经设置了 vee-validation 并且正在处理我的 NuxtJS 项目，并且验证运行良好，但我无法访问 $validator 并且它总是未定义...

我的插件文件：-

import { extend, ValidationObserver, ValidationProvider } from "vee-validate";
import * as VeeValidate from "vee-validate";
import { required } from "vee-validate/dist/rules";

extend("required", {
  ...required,
  message: field =>
    `${$nuxt.$t("fieldErr1")}${$nuxt.$t(field).toLowerCase()}${$nuxt.$t(
      "fieldErr2"
    )}`
});

Vue.component("validation-provider", ValidationProvider);
Vue.component("validation-observer", ValidationObserver);
Vue.use(VeeValidate, {
  inject: true
});

【问题讨论】：

标签： nuxt.js vee-validate

【解决方案1】：

插件中无需配置Vue.use(VeeValidation)。

在插件中

import Vue from 'vue'
import {extend, ValidationObserver, ValidationProvider} from 'vee-validate';
import * as rules from "vee-validate/dist/rules";

Vue.component('ValidationProvider', ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);
    
for (let [rule, validation] of Object.entries(rules)) {
  // noinspection TypeScriptValidateTypes
  extend(rule, {
    ...validation
  });
}

试试 vue 代码

<template>
      <h2 style="margin-right: 20px">Info form</h2>
      <ValidationObserver ref="form">
      <form @submit.prevent="onSubmit">
        <b-form-group>
          <label for="id">Id</label>
          <ValidationProvider name="Id" rules="required|min:5" immediate v-slot="{ errors }">
            <b-input type="text" id="id" v-model="form.id" placeholder="Enter id"></b-input>
            <span v-show="errors.length>0" class="is-invalid">{{ errors[0] }}</span>
          </ValidationProvider>
        </b-form-group>

        <b-form-group>
          <label for="name">Name</label>
          <ValidationProvider name="Name" rules="required" immediate v-slot="{ errors }">
            <b-input type="text" id="name" v-model="form.name" placeholder="Enter name"></b-input>
            <span v-show="errors.length>0" class="is-invalid">{{ errors[0] }}</span>
          </ValidationProvider>
        </b-form-group>

        <b-btn type="submit">Show my info</b-btn>
      </form>
      </ValidationObserver>

</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator';

@Component
export default class ValidationExample extends Vue {

protected onSubmit() {

    this.$refs.form.validate().then(success => {
      if (!success) {
        return;
      }

      alert('Form has been submitted!');

      // Wait until the models are updated in the UI
      this.$nextTick(() => {
        this.$refs.form.reset();
      });
    });

}
</script>

在 ValidationObserver

中使用 ref

在我提供的示例中，我使用了 bootstrap 和 typescript。

但是，它应该完全适用于您的代码。

【讨论】：