Vue.js中v-for渲染表单的focusout失焦校验属性访问错误如何解决

问题核心原因 #

JS的对象属性访问有两种语法：

• 点语法：obj.key 会将key当做固定字面量，读取对象上名为key的属性
• 方括号语法：obj[变量] 会读取变量的值作为属性名，匹配对象上的对应属性

你代码中用this.documentItems[itemIndex].name属于点语法，系统会直接找documentItems[itemIndex]里的name属性，而不是用你传入的参数name的值（比如barcode、product_name）作为属性名，同时errors数组的属性访问也存在同样问题，再加上可能存在的errors对应项未初始化的问题，最终触发报错。

修复后的代码 #

将checkInput函数修改为以下内容即可：

checkInput(name, itemIndex){
  // 用方括号语法读取对应字段的值
  if(this.documentItems[itemIndex][name] === ""){
    // 兼容Vue2响应式规则，提前初始化不存在的层级
    if(!this.errors[itemIndex]) {
      this.$set(this.errors, itemIndex, { [name]: [] });
    } else if(!this.errors[itemIndex][name]) {
      this.$set(this.errors[itemIndex], name, []);
    }
    // 方括号语法访问errors的对应字段，追加报错信息
    this.errors[itemIndex][name].push("To polje je obvezno.");
  }
  console.log(this.errors);
},

额外注意事项 #

确保errors已经在组件的data选项中提前声明为数组类型，比如：

data() {
  return {
    // 其他自定义数据
    documentItems: [],
    errors: [] // 必须提前声明
  }
}

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