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

  • Z时代
  • 2024-02-21
  • 分类：IT

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这种数组就还是没法满足

回答：

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

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

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

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

以上是 v-model动态绑定时数据格式的问题 的全部内容， 来源链接： utcz.com/p/936825.html

回到顶部