Vue.js验证问题：向数组推送错误码时始终得到空数组

问题根源 #

你在验证函数内通过let listErrors = []声明了局部变量，这个变量和Vue data中定义的this.listErrors是两个完全独立的变量。你往局部的listErrors里推送错误对象，但最终输出的是data里的空数组（或是误操作了局部变量但未保留有效引用），所以才会一直得到空数组。

另外你在address字段的校验代码里还写错了错误对象的键名：{'Address': 'Floor', value: 'required'}，这里应该把键名统一为name，不然后续处理错误信息时会出问题。

修正步骤 #

1. 删除函数内的let listErrors = []声明，直接操作Vue实例上的this.listErrors，操作前建议先清空数组，避免之前的错误数据残留。
2. 修正address字段校验的错误对象结构。

修正后的代码 #

// 先清空data里的错误数组
this.listErrors = []

if (this.floor === '') {
    this.listErrors.push({ 'name': 'Floor', value: 'required' });        
}

if (this.street === '') {
    this.listErrors.push({ 'name': 'Street', value: 'required' });        
}

if (this.address === '') {
    this.listErrors.push({ 'name': 'Address', value: 'required' });        
}

内容的提问来源于stack exchange，提问作者saneese