VueJS遍历对象拆分表单字段时如何过滤advancedParams避免混入新对象

你可以通过在遍历中过滤advancedParams字段，或者直接用ES6对象解构的方式完成拆分，两种实现如下：

方案1：遍历判断实现（兼容旧环境） #

首先确保你已经在Vue的data()中提前声明了aParams空对象，之后修改原有遍历逻辑即可：

if (this.example.hasOwnProperty(this.someKey)) {
    const currentData = this.example[this.someKey]
    for (const [key, value] of Object.entries(currentData)) {
        if (key === 'advancedParams') {
            // 将嵌套属性全部赋值给aParams
            Object.assign(this.aParams, value)
            continue
        }
        this.newInputs[key] = value
    }
}

如果需要避免旧数据残留，可在遍历前清空两个对象：

// 放在if块内第一行即可
this.newInputs = {}
this.aParams = {}

方案2：对象解构实现（更简洁） #

支持ES6+的环境下可以用解构语法直接拆分，无需手动遍历：

if (this.example.hasOwnProperty(this.someKey)) {
    // 拆分出advancedParams和其余一级属性
    const { advancedParams, ...commonParams } = this.example[this.someKey]
    this.newInputs = { ...commonParams }
    this.aParams = { ...advancedParams }
}

注意：Vue2环境下直接替换整个响应式对象的写法不会丢失响应式，不需要额外调用$set。

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