v-model动态绑定时数据格式的问题

let a = [{ name:'133', },{name:'456'}];
let b = [{ name:{ name:'23' } },{name:{ name:'12313' }}];
let c = [{ name:{ nameStr:'23',surname:"2" } },{name:{ nameStr:'12313',surname:"1" }}];
let d = [{ nameStr:'23',surname:"2",nameObject:{ title:"213" } },{ nameStr:'12313',surname:"1",nameObject:{ title:"12313" } }];

test可能是a、b、c任意一种数据格式

let test = a;
let modelKey = "name";
<template v-for="item in test">
    <el-input v-model="item[modelKey]">
</template>

我只知道一层可以,b这种数据格式如何实现item下的某个属性值呢(不限层级)

let test = b;
// 这时v-model怎么写才能动态绑定,
let modelKey = "";  ///??

<template v-for="item in test">
    <el-input v-model="item.name[modelKey]">
</template>

这种方式还是固定了name,换成d这种数组就还是没法满足

阅读 2.5k
1 个回答

不知道你这数据格式是不是来自后端,一个接口返回的数据可以不一样,但格式应该是一样的,如果你们的需求确实需要这样做,那最佳的方案是自己转换数据格式,千万不要渲染和解析的时候去做差异化处理,不仅仅浪费性能,后续很难维护。
从你上面的数据看到有以下两点问题:

  1. 数据格式不固定
  2. key值不固定

针对a,b,c,d 三种数据结构, 你最好全部转换成统一的数据结构,例如:
const data = [{modelKey: '', value: 'xx'}]
这样后期只需要维护转换器,不论接口和业务如何变化,不会影响到最终输出。

不清楚你的具体业务,无法给出最终实现代码。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题