Vue中errors对象填充后v-if控制的span错误提示不显示如何解决

安全阿岳

2026-9-28

问题原因

你遇到的是Vue2特有的响应式失效问题：
Vue2的响应式基于Object.defineProperty实现，仅支持监听初始化时就在data中声明的属性，通过普通赋值方式动态新增的数组元素、对象属性不会被Vue的响应式系统监听，所以控制台能读到最新值，但视图不会触发更新。

你的两处赋值操作都触发了这个问题：

接口请求后通过this.errors[i] = xxx给数组动态添加索引元素
校验时通过this.errors[itemIndex][name] = xxx给对象动态新增字段

修复方案

1. 调整接口请求后的初始化赋值逻辑

用Vue提供的$set方法给数组添加响应式元素：

for(var i = 0;i < response.data.documentItems[0].length;i++){
  this.$set(this.errors, i, {
    barcode: null,
    product_name: null,
  })
}

2. 调整校验方法的赋值逻辑

给错误对象添加字段时同样用$set保证响应式：

checkInput(name, itemIndex){
    // 建议加空字符串判断，避免用户输入空格被判定为合法
    if(!this.documentItems[itemIndex][name] || this.documentItems[itemIndex][name].trim() === ''){
        this.$set(this.errors[itemIndex], name, { message: 'to polje je obvezno'})
    } else {
        // 校验通过时清空错误信息，同样用$set保证响应
        this.$set(this.errors[itemIndex], name, null)
    }
}