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

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

image.png

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

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

阅读 308
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)" />
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏