Question

我正在使用vue create CLI构建自定义的Vue JS插件。我已经导入了各种程序包，但是，尝试在VeeValidate中使用自定义设置时出现错误。

plugin.js

/*
 * NOTE:
 *   This file is plugin stub for main.js
 */

// Import required packages
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'

// Import custom LES form styling
import './assets/scss/les-application.scss'

// Import our plugin
import plugin from './index'

/* Vue Validation */
const config = {
  fieldsBagName: 'fields',
  errorBagName: 'errors',
  classes: true,
  strict: false,
  classNames: {
    valid: '',
    invalid: 'is-invalid'
  },
  events: 'change|blur',
  validity: false,
  inject: false,
  aria: true,
  delay: 0
}

Vue.use(require('vue-moment'))
Vue.use(VueResource)
Vue.use(VeeValidate, config)
Vue.use(plugin)

// Custom validation rules


/*
 * NOTE:
 *   If you want Vue instance of main.js to import something in your plugin as a Vue option,
 *   you need to export it here.
 */
// export default plugin

main.js

import Vue from 'vue'
import App from './App.vue'
import './plugin'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

错误：

Property or method "errors" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

和

Cannot read property 'has' of undefined

我正在尝试找出配置中缺少的内容，如果我从plugin.js中删除了VeeValidate配置，那么它将使用默认的VeeValidate选项并且可以正常工作。

Answer 1

这是验证配置中的inject: false,引起的。如果将其设置为true或未将其设置，则errors对象应插入到组件中而不会出现错误。

inject:false在vee-validate 2 http://vee-validate.logaretm.com/v2/concepts/injections.html中停止自动注入

此变化通过vee-validate 3进行，其中需要使用https://logaretm.github.io/vee-validate/migration.html#migrating-from-2-x-to-3-0 ValidationObserver和ValidationProvider

导入自定义插件时未定义VeeValidate错误

1 个答案: