Vee Vee JS属性或方法“必需”不在实例上定义，而是在呈现过程中引用。

Question

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

Vue警告:属性或方法“必需”不在实例上定义，而是在呈现过程中引用

这是源代码：

vee-valdate.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>

Answer 1

我的团队就是这样做的。

/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']
}