【vee-validate】 [Vue warn]: The computed property "fields" is already defined in data.

背景：

项目用的vue + iVew2.0；iVew里自带form表单验证，api如下

image.png

其中需要定义 rule对象来储存表单校验规则，但是我的是一个90多项的巨型表单，定义这样一个对象实在是有点累，于是想引用 vee-validate在渲染dom的同时将validate条件进行初始化

页面：

image.png

开发过程：

看看官网，install、引用、设置默认blur时触发

# install with npm
npm install vee-validate

# install with yarn
yarn add vee-validate

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate, { events: 'blur'})

结果：

期待的搓手手~~

image.png

emmmm..fields已经被定义过了？由于iView也有表单校验功能，所以初步猜测是因为它的问题，果断搜了搜 vee-validate官网

import Vue from 'vue';
import VeeValidate from 'vee-validate';

const config = {
  aria: true,
  classNames: {},
  classes: false,
  delay: 0,
  dictionary: null,
  errorBagName: 'errors', // change if property conflicts
  events: 'input|blur',
  fieldsBagName: 'fields',
  i18n: null, // the vue-i18n plugin instance
  i18nRootKey: 'validations', // the nested key under which the validation messages will be located
  inject: true,
  locale: 'en',
  validity: false
};

代码稍微修改，如下：

const config = {
  errorBagName: 'errorBags',
  fieldsBagName: 'fieldBags',
  events: 'blur'
}

保存，查看，完全可以正常使用啦~

附赠：this.errorBags.clear() 清除表单全部的验证结果