当前位置:网站首页>Method of changing object properties
Method of changing object properties
2022-07-06 02:13:00 【MonsterQy】
List of articles
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 .
边栏推荐
- Concept of storage engine
- Have a look at this generation
- Use Scrollview and tabhost to realize vertical scrollbars and tabs
- Install redis
- Global and Chinese markets of nasal oxygen tubes 2022-2028: Research Report on technology, participants, trends, market size and share
- Adapter-a technology of adaptive pre training continuous learning
- [flask] official tutorial -part3: blog blueprint, project installability
- Know MySQL database
- PHP campus financial management system for computer graduation design
- FTP server, ssh server (super brief)
猜你喜欢
Adapter-a technology of adaptive pre training continuous learning
Virtual machine network, networking settings, interconnection with host computer, network configuration
Campus second-hand transaction based on wechat applet
Computer graduation design PHP part-time recruitment management system for College Students
Folio. Ink is a free, fast and easy-to-use image sharing tool
[ssrf-01] principle and utilization examples of server-side Request Forgery vulnerability
The intelligent material transmission system of the 6th National Games of the Blue Bridge Cup
Minecraft 1.16.5 生化8 模组 2.0版本 故事书+更多枪械
dried food! Accelerating sparse neural network through hardware and software co design
Computer graduation design PHP campus restaurant online ordering system
随机推荐
How to upgrade kubernetes in place
National intangible cultural heritage inheritor HD Wang's shadow digital collection of "Four Beauties" made an amazing debut!
The intelligent material transmission system of the 6th National Games of the Blue Bridge Cup
leetcode3、實現 strStr()
leetcode-2.回文判断
VIM usage guide
Reasonable and sensible
Gbase 8C database upgrade error
Redis-Key的操作
RDD partition rules of spark
I like Takeshi Kitano's words very much: although it's hard, I will still choose that kind of hot life
A basic lintcode MySQL database problem
2 power view
Blue Bridge Cup embedded_ STM32_ New project file_ Explain in detail
Exness: Mercedes Benz's profits exceed expectations, and it is predicted that there will be a supply chain shortage in 2022
Dynamics 365 开发协作最佳实践思考
Social networking website for college students based on computer graduation design PHP
Use image components to slide through photo albums and mobile phone photo album pages
Use Scrollview and tabhost to realize vertical scrollbars and tabs
Comments on flowable source code (XXXV) timer activation process definition processor, process instance migration job processor