更改对象属性的方法


背景

在完成表单验证时,某些需要远程搜索的来自于后端返回的数据属性名,与最后提交表单验证时,要求的属性名不一致,Eg:后端返回的产品有关信息为producet_name,product_id
,但是最后需要的却是一个product对象,里面含有id和name两个属性。


情景铺垫

在正式介绍解决方法之前,笔者在此先更加详细的介绍一下,项目的背景,以便更好的理解解决方法。项目使用了element-plus,这种情况出现在,利用el-select组件,链接远程搜素,直接获取数据库的某些数据,这些数据是对象的格式,这个时候参考element-plus的文档,可以知道,当el-option为对象格式的数据时,对el-select设置value-key属性,属性值对应el-options的key值(唯一的),这样,当点击某一选项的时候,这个选项的对象格式的信息,将存入到v-model绑定的值。

解决方法

对于此问题,可以有两种解决方式:
1.在submit时,重新修正表单要求的属性字段键名,这就需要子组件修改父组件的属性,这里使用provide,inject的形式会比较好一点,因为由于业务逻辑需要,有的时候可能会出现孙->父的情况,然后在submit对应的事件中,对各自段进行整理即可,如下代码:

  if (data.researchMethod ) {
    data.research_method_code = data.researchMethod.research_method_code;
    data.research_method_name = data.researchMethod.research_method_name;
  }

这样是比较麻烦的,虽然代码很简单,但是当表单需要校验的信息比较多的时候,需要机械的去写很多类似的代码段,此外,由于表单最后需要的内容可能有多种格式,针对不同的字段,也要进行不同的键名改写。比较麻烦,但是表单校验字段比较少的的时候,用起来还是比较方便的。
2.利用computed方法,获取数据时,直接修改键名。
这种方法个人认为更加灵巧,十分的巧妙的去处理了属性名不一致的问题,首先将el-select绑定到一个值上,Eg: v-model=“transferCenter”。然后监听这个属性,并利用getter和setter对其进行操作,直接上代码了:

const transferCenter = computed({
  get() {
    return {
      cost_dept_code: form.cost_dept_code,
      cost_dept_name: form.cost_dept_name,
      cost_center_code: form.cost_center_code,
      cost_center_name: form.cost_center_name,
    };
  },
  set(val) {
    form.cost_dept_code = val.cost_dept_code;
    form.cost_dept_name = val.cost_dept_name;
    form.cost_center_code = val.cost_center_code;
    form.cost_center_name = val.cost_center_name;
  },
});

这里补充说明一下computed的用法吧,get(){}函数:当需要读取当前属性时执行,根据相关数据计算并返回当前属性的值 ,set(val) {}函数:监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据。这里就直接实现了数据的双向绑定,并且潜移默化的更改了属性的名,确保了form的属性字段对应正确的属性值。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值