Method of changing object properties

---

background

When completing form validation , Some data attribute names returned from the backend that need remote search , When validating with the last submitted form , The required attribute names are inconsistent ,Eg: The product information returned by the backend is producet_name,product_id
, But what is needed in the end is one product object , It contains id and name Two attributes .

---

The situation paves the way

Before formally introducing the solution , The author first introduces it in more detail , The background of the project , In order to better understand the solution . The project USES element-plus, This happens in , utilize el-select Components , Link remote search , Get some data of the database directly , These data are in the format of objects , For reference at this time element-plus Documents , You can know , When el-option Data in object format , Yes el-select Set up value-key attribute , Attribute value corresponding el-options Of key value （ Unique ）, such , When clicking on an option , Information about the object format of this option , Save to v-model The value of the binding .

resolvent

For this problem , There are two solutions ：
1. stay submit when , Revise the attribute field key name required by the form , This requires the child component to modify the properties of the parent component , Use here provide,inject The form of will be better , Because business logic requires , Sometimes there may be sun -> Father's situation , And then in submit In the corresponding event , Just sort out the respective sections , The following code ：

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

This is more troublesome , Although the code is very simple , But when the form needs more information to be verified , You need to write many similar code segments mechanically , Besides , Because the final content of the form may have many formats , For different fields , Also rewrite different key names . More trouble , But when the form verification field is relatively few , It is more convenient to use .
2. utilize computed Method , When getting data , Directly modify the key name .
Personally, I think this method is more clever , It is very clever to deal with the problem of inconsistent attribute names , First of all, will el-select Bind to a value ,Eg: v-model=“transferCenter”. Then listen for this attribute , And make use of getter and setter Operate on it , Go straight to the code ：

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;
  },
});

Here's an additional explanation computed How to use it ,get(){} function ： Execute when the current attribute needs to be read , Calculate and return the value of the current property according to the relevant data ,set(val) {} function ： Monitor the change of current attribute value , Execute when the attribute value changes , Update relevant attribute data . Here we directly realize the two-way binding of data , And imperceptibly changed the name of the attribute , Ensured form The attribute field of corresponds to the correct attribute value .