背景
在使用Vue開發(fā)時，遇到了這樣一個問題淘捡。如下所示：
[Vue warn]: The computed property "fields" is already defined in data.
image.png
問題分析
- 鎖定問題
很明顯問題是fields屬性被重復聲明了多次藕各。 - 查詢位置
于是開始在整個項目中搜索fields字段。由于筆者使用PHPStorm焦除，很簡單就可以實現(xiàn)find in path激况，但竟然沒搜到膘魄。 - 分析問題
因為筆者在開發(fā)時，默認忽略了node_modules文件浙踢，所以問題一定出現(xiàn)在我引用的哪個包灿渴，與現(xiàn)有包產(chǎn)生了沖突。 - 繼續(xù)探索
由于項目初始蹬挤，筆者僅引用了兩個包棘幸，其一為ElementUI，其二為vee-validate吨悍； - 精確鎖定問題
于是，查閱了一下文檔育瓜，發(fā)現(xiàn)了vee-validate作者很有先見預料了這個問題爆雹，在他的文檔里的配置項Configuration里面是這樣寫的愕鼓。
import Vue from 'vue';
import VeeValidate from 'vee-validate';
const config = {
errorBagName: 'errors', // change if property conflicts.
fieldsBagName: 'fields',
delay: 0,
locale: 'en',
dictionary: null,
strict: true,
enableAutoClasses: false,
classNames: {
touched: 'touched', // the control has been blurred
untouched: 'untouched', // the control hasn't been blurred
valid: 'valid', // model is valid
invalid: 'invalid', // model is invalid
pristine: 'pristine', // control has not been interacted with
dirty: 'dirty' // control has been interacted with
},
events: 'input|blur',
inject: true
};
Vue.use(VeeValidate, config);
在config對象中，可以清楚的看到
fieldsBagName:fields配置項册倒，在errorBagName注釋中可以看到磺送，change if property conflicts，意思就是在發(fā)生屬性沖突的情況下崇呵，去更改它馅袁。
解決問題
最終的解決方法就是：
// 使用vee-validate（會報沖突， 因為elmentui中fields屬性已使用）
import VeeValidate from 'vee-validate';
const config = {
errorBagName: 'errorBags', // change if property conflicts.
fieldsBagName: 'fieldBags',
};
Vue.use(VeeValidate, config);
然后犹褒，效果是這樣的（嘿嘿嘿）：
image.png
