Vue项目中如何将errors对象内所有元素设为空字符串？

我明白你现在的困扰：想把Vue实例里errors对象的所有属性值都设为空字符串，但试了好几种方法都没效果，单个清空某个属性（比如errors.login）是可行的，但想要一个全局的清空方案对吧？

先说说你之前尝试的方法为什么没起作用：

• Object.assign(this.$data.errors, {})：这个方法是把空对象的属性复制到errors里，但空对象没有任何属性，所以errors原来的属性根本不会被修改，自然没效果。
• this.errors = ''：这直接把errors从对象类型改成了字符串类型，破坏了原本的对象结构，后续再操作errors的属性肯定会出问题。
• this.$set(this.$data.errors, '')：$set的正确用法是this.$set(对象, 属性名, 属性值)，你少了属性名参数，所以这个调用本身就是错误的。

接下来给你两种靠谱的解决方案，根据你的场景选就行：

方案1：遍历当前errors的所有属性，逐个清空 #

如果你的errors对象的属性是动态变化的（可能会新增或删除属性），用这种方法最稳妥：

// 遍历errors对象的所有属性键
Object.keys(this.errors).forEach(key => {
  // 把每个属性的值设为空字符串
  this.errors[key] = ''
})

这个方法会遍历errors当前所有的属性，不管是一开始定义的还是后来新增的，都能把值清空成''，而且完全保留原对象的结构，不会破坏响应式。

方案2：利用初始的errors结构重置 #

如果你的errors在data里是固定结构的（比如一开始就定义了login、password这些属性），可以直接复用初始的空结构来重置：
首先假设你的data定义是这样的：

data() {
  return {
    errors: {
      login: '',
      password: '',
      email: ''
    }
  }
}

那你可以这么写：

// 获取data里定义的初始errors空结构
const initialErrors = this.$options.data.call(this).errors
// 把当前errors替换成初始的空结构（保证响应式）
this.errors = { ...initialErrors }

或者如果你不想替换整个对象，只想清空每个属性的值，也可以遍历初始结构的键来赋值：

const initialErrors = this.$options.data.call(this).errors
Object.keys(initialErrors).forEach(key => {
  this.errors[key] = ''
})

这种方法的好处是，即使errors后续被新增了属性，也只会清空你初始定义的那些属性（如果这是你想要的效果的话）。

这两种方法都能实现你要的全局清空errors所有属性值的需求，选适合你业务场景的就行～

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