vue3: v-model如何传递多层嵌套属性？

Question

vue3: v-model如何传递多层嵌套属性？

预期：formConfigVal.formData.tableattachments.innerRequireAttach当成了一个属性
实际：tableattachments.innerRequireAttach当成了一个属性

vue3: v-model如何传递多层嵌套属性？

Answer 1

首先这个问题跟 Vue 无关，而是基础的 JS 语法问题。

const a = {
  b: {
    c: {
      d: 'foo'
    }
  }
}

const key = 'c.d';
const val = a.b[key];
console.log(val);

问：上面的代码会输出什么？

如果你能明白为什么，那么这个问题也就很好理解了。

如果你真的想要这种深层路径的属性取值/赋值，你可以利用 lodash 库提供的 _.get()、_.set() 这两个方法。

其次这里用 v-model 就不合适了（虽然其实也能实现，但写法会比较 ugly），但 v-model 本来就是一个语法糖，它实质会被解析成 v-bind + v-on:update，那么你直接写成 v-bind + v-on:update 就好了。

<!-- 伪代码 -->
<Component :foo="_.get(data, path)" @update:foo="(e) => _.set(data, path, e)" />