vue 中 v-model 动态属性名绑定值的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 485 天前的主题，其中的信息可能已经有所发展或是发生改变。

大家的留言都看了，也是解答了我的一些疑问的现在有这样一个问题，直接看代码吧

<el-switch v-model="form['delivery']['value']" />

data() {
    return {
      form: {
        delivery: {
          value: false
        }
      }
    }
  }
  methods: {
    onSubmit() {
      console.log(this.form)
    }
  }

打印结果是有层级的对象:

{ delivery: {value: true}}

假如我从前面一个组件传过来一个属性名 'delivery.value', 我怎么把这个'delivery.value' 转换成 form['delivery']['value']

属性名的层级不是固定的，要实现属性双向绑定，保持层级关系

大家有什么好的办法么

form

属性

层级

value'

3 条回复 • 2023-07-26 09:39:01 +08:00

vueli

2023-07-26 08:58:17 +08:00

封装一个组件，这个组件传的 v-model 值是最外层的 form ，然后再添加一个值，structure='delivery.value' .

LavaC

2023-07-26 09:37:05 +08:00

前阵子遇到过这个问题，我参考了 element form 的方法
```javascript
v-model="o[k]"
```
```javascript
export function getPropByPath (obj, path, strict) {
let tempObj = obj
path = path.replace(/\[(\w+)\]/g, '.$1')
path = path.replace(/^\./, '')
let keyArr = path.split('.')
let i = 0
for (let len = keyArr.length; i < len - 1; ++i) {
if (!tempObj && !strict) break
let key = keyArr[i]
if (key in tempObj) {
tempObj = tempObj[key]
} else {
if (strict) {
throw new Error('xxxxxx')
}
break
}
}
return {
o: tempObj,
k: keyArr[i],
v: tempObj ? tempObj[keyArr[i]] : null
}
};
```

LavaC

2023-07-26 09:39:01 +08:00

@LavaC 简单来说就是分割你那团字符串"xxx.xxx.xxx"，从最初的对象获取到最终绑定值的上一级，再用这个上一级完成一次 v-model