Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to solve the pit of el-form-item attribute prop in element". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Recently, he is responsible for the front and back end project development. A requirement is to implement Djangorestframework (drf) + element to dynamically render form forms, the drf back end provides json, the front end obtains form form elements from json, and binds form verification rules.

An error was encountered on the el-form-item attribute prop or was not bound to the data. The error is as follows

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'prop')"

The element official documentation explains that the prop of el-form-item must be a direct child of the el-form attribute model

The data returned by the backend is as follows

{"status": "success", "code": 200,200, "data": {"form_attributes": {"inline": true, "label-width": "auto", "size": "small"}, "form_data": {"name": null, "path": null Component: null, hidden: false, meta: {"icon": null, "title": null}, "pid": null}, "form_item_list": [{"type": "text" "prop": "name", "label": "menu name", "placeholder": "Please enter menu name", "rules": [{"required": true, "message": "Please enter menu name" "trigger": "blur"}}, {"type": "text", "prop": "path", "label": "Link address", "placeholder": "'/ 'beginning" "rules": [{"required": true, "message": "'/ 'beginning", "trigger": "blur"}]} {"type": "text", "prop": "component", "label": "component", "placeholder": "fill in the reference frontend component", "rules": [{"required": true "message": "fill in the front-end components for reference", "trigger": "blur"}]}, {"type": "switch", "prop": "hidden" "label": "whether to hide", "value": false}, {"type": "json", "prop": "meta", "item": [{"type": "text" "prop": "icon", "label": "Icon", "placeholder": "Icon name Refer to the front-end icon "," rules ": [{" required ": true," message ":" icon name " Refer to the front-end icon "," trigger ":" blur "}]}, {" type ":" text "," prop ":" title " "label": "title", "placeholder": "Please enter a menu name", "rules": [{"required": true "message": "Please enter the menu name", "trigger": "blur"}]}]} {"type": "select", "prop": "pid", "label": "parent menu", "clearable": true, "filterable": false, "multiple": false "options": [{"label": "system Management", "value": 2}, {"label": "user Management" "value": 3}, {"label": "menu Management", "value": 4}, {"label": "Rights Management" "value": 5}, {"label": "role Management", "value": 6}]}}, "message": null}

From the above, you can see that the form form element corresponds to form_item_list, and the form submission data is form_data. These two are separate, that is, model binding in el-form is form_data and el-form-item traverses form_item_list. Note that form_item_list contains nested type json, and the corresponding back end is the json field rendering form. The form_data return field is designed to control the front-end json content. Dynamic fields are too flexible, and the fields and types contained in json can be modified at will, so the returned fields are controlled and verified by the backend.

The code for intercepting the front-end rendering form is as follows. Note that it can be rendered at this time, but the rules binding fails.

Cancel confirmation

Rendering at the front end cannot be bound to form rules, as shown in the following figure

After research, it can be found from the above data structure that each element in form_data corresponds to the prop in form_item_list, so there are two ways to locate it.

The first way of writing is as follows, which is not so intuitive

A better second way of writing is as follows

At this point, you can dynamically render the form and bind the form item validation rules, as shown in the following figure

This is the end of the content of "how to solve the pit of el-form-item attribute prop in element". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.