$validator undefined vee-validate NuxtJS

Question

我有 ve 验证设置并处理我的 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
});

Answer 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

在我提供的示例中，我使用了引导程序和打字稿。

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