Vee 验证 Nuxt JS 属性或方法“必需”未在实例上定义，但在渲染期间被引用

如何解决Vee 验证 Nuxt JS 属性或方法“必需”未在实例上定义，但在渲染期间被引用

我是 Vue 和 Nuxt 的新手，我似乎无法克服这个错误：

[Vue 警告]：属性或方法“必需”未在实例上定义但在渲染期间引用

这是源代码：

vee-validate.js :

import Vue from 'vue'
import {ValidationProvider,ValidationObserver,extend} from 'vee-validate'
import {required,email} from 'vee-validate/dist/rules'
Vue.component('ValidationProvider',ValidationProvider)
Vue.component('ValidationObserver',ValidationObserver)

extend('required',{
    ...required,message:'This field is required'
})


extend('email',{
    ...email,message:'This field is required'

})

对于表格：

<template>
  <div>
    <div class="col-6 pr-2">
      <label for="name">*Name </label> <br />
      <ValidationObserver>
        <ValidationProvider v-slot="{ errors }" mode="passive" rules="required">
          <input id="name" v-model="required" type="text" name="name" placeholder="Your name" />
          <span class="validation-span">{{ errors[0] }}</span>
        </ValidationProvider>
      </ValidationObserver>
    </div>
    <div class="col-6 pr-2">
      <label for="company">Company</label> <br />
      <input id="company" type="text" label="Company" placeholder="Name of your company" />
      <br />
    </div>
    <div class="col-6 pr-2">
      <br />
      <ValidationObserver>
        <ValidationProvider v-slot="{ errors }" mode="passive" rules="required|email">
          <label for="email">*Email</label> <br />
          <input id="email" v-model="email" type="email" placeholder="example@email.com" /> <br />
          <span class="validation-span">{{ errors[0] }}</span>
        </ValidationProvider>
      </ValidationObserver>
    </div>
  </div>
</template>

解决方法

我们的团队就是这样做的。

/utils/vee-validate-rules.js

import { extend } from 'vee-validate'
import { email as defaultEmail,required as defaultRequired } from 'vee-validate/dist/rules'

const email = extend('email',{
  ...defaultEmail,})

const required = extend('required',{
  ...defaultRequired,})


export { extend,email,required }

一些 .vue 文件

<script>
import { extend,required,email } from '~/utils/vee-validate-rules'

export default {
  beforeCreate() {
    extend('required',{ ...required,message: this.$t('veeValidate.required') })
    extend('email',{ ...email,message: this.$t('veeValidate.email') })
  },}
</script>

到目前为止效果很好。在 i18n 方面可以做得更好。

另外，也不要忘记转译它

nuxt.config.js

build: {
  transpile: ['vee-validate/dist/rules']
}